/*
 * Project styles that are not part of the Webflow export.
 * Loaded after the exported stylesheets so a re-export never overwrites them.
 */

/* Homepage subgrid: the titles come from the CMS and sit on top of the artwork. */
.homepage-subgrid_child {
  position: relative;
  container-type: inline-size;
}

.homepage-subgrid_caption {
  pointer-events: none;
  text-align: center;
  flex-direction: column;
  place-content: center;
  align-items: center;
  gap: .2em;
  padding: 10%;
  display: flex;
  position: absolute;
  inset: 0;
}

.homepage-subgrid_title,
.homepage-subgrid_subtitle {
  color: var(--neutral--white);
  font-family: var(--font--heading-font);
  line-height: var(--font--heading-line-height);
  text-shadow: 0 .08em .16em #00000059;
}

/* The first size is the fallback for browsers without container query support. */
.homepage-subgrid_title {
  font-size: 1.25rem;
  font-size: 6.8cqw;
  font-weight: 700;
}

.homepage-subgrid_subtitle {
  font-size: .875rem;
  font-size: 4.4cqw;
  font-weight: 500;
}

@media screen and (max-width: 479px) {
  /*
   * The exported stylesheet caps the image at 60svw and centers it through the grid,
   * which makes the link content-sized. A container may not derive its own inline size
   * from its contents, so the width is pinned here instead.
   */
  .homepage-subgrid_child {
    width: 60svw;
    margin-left: auto;
    margin-right: auto;
  }
}