@media (max-width: 479px) {

  .artwork-hero_title {
    font-size: 6.25em;
  }
}






.artwork-hero {
  padding-block-start: 9em;
}

.artwork-hero_inner {
  display: flex;
  flex-direction: column;
  gap: var(--gap-60);
}

.artwork-hero_title {

  filter: blur(10px);
  opacity: 0.3;

  overflow-wrap: break-word;
  max-width: 100%;
}

@supports ((animation-timeline: view()) and (animation-range: entry)) {
  @keyframes artwork-title-reveal {
    from {
      filter: blur(10px);
      opacity: 0.3;
    }
    to {
      filter: blur(0);
      opacity: 1;
    }
  }

  .artwork-hero_title {
    animation: artwork-title-reveal auto linear both;
    animation-timeline: view();
    animation-range: entry;
  }
}

.artwork-hero_copy {
  max-width: 40em;
}



.artwork-list_grid {
  display: flex;
  flex-direction: column;
  gap: var(--gap-60);
}

.artwork-list_group {
  display: flex;
  flex-direction: column;
  gap: var(--gap-20);
}

.artwork-list_group-label {
  color: var(--color-white-grey);
  text-transform: uppercase;
}

.artwork-list_row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: var(--gap-20);
  align-items: start;
}

.artwork {
  display: flex;
  flex-direction: column;
  gap: 0.75em;

  color: var(--color-white-grey);
  transition: color var(--duration-hover-slow) var(--ease-hover);
}

.artwork:hover {
  color: var(--color-white);
}

.artwork_media {
  display: block;
  background: var(--background);
}

.artwork_media img {
  display: block;
  width: 100%;
  height: auto;
}


.artwork_media.is-poster-frame {
  display: flex;
  align-items: flex-start;
  justify-content: center;
}

.artwork_media.is-poster-frame img {
  width: 387px;
  max-width: 100%;
  height: auto;
}

.artwork_caption {
  display: flex;
  flex-direction: column;
  gap: 0.25em;
}

.artwork_title {
  font-family: var(--font-body);
  font-weight: var(--fw-medium);
  text-transform: uppercase;
}

.artwork_description {
  color: var(--color-white-grey);
}
</content>
</invoke>