.media-gallery-section {
  border-top: 1px solid rgba(76, 57, 32, .25);
}

.media-gallery-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(20rem, .82fr);
  align-items: end;
  gap: clamp(2rem, 5vw, 4.5rem);
}

.media-gallery-heading > div > p:last-child {
  max-width: 38rem;
  margin-top: 1rem;
  color: var(--ink-soft);
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.85;
}

.media-usage-note {
  position: relative;
  padding: 1.45rem 1.55rem;
  background:
    repeating-linear-gradient(0deg, transparent 0 30px, rgba(73, 55, 31, .1) 30px 31px),
    #c9b583;
  border: 1px solid rgba(73, 55, 31, .34);
  box-shadow: 4px 5px rgba(65, 48, 27, .16);
}

.media-usage-note::before {
  position: absolute;
  top: -9px;
  left: 2.2rem;
  width: 5rem;
  height: 1.35rem;
  content: "";
  background: rgba(230, 216, 177, .76);
  transform: rotate(-2deg);
}

.media-usage-note p,
.media-usage-note strong,
.media-usage-note span {
  display: block;
}

.media-usage-note p {
  color: #8d4935;
  font-family: var(--sans);
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .06em;
}

.media-usage-note strong {
  margin-top: .45rem;
  font-size: 1.05rem;
  line-height: 1.7;
}

.media-usage-note span {
  margin-top: .55rem;
  color: #493e30;
  font-family: var(--sans);
  font-size: .88rem;
  line-height: 1.75;
}

.media-gallery-group {
  margin-top: clamp(2.8rem, 5vw, 4.5rem);
}

.media-gallery-group-title {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: .5rem 1.5rem;
  margin-bottom: 1rem;
  padding-bottom: .65rem;
  border-bottom: 2px solid rgba(151, 72, 50, .6);
}

.media-gallery-group-title h3 {
  font-size: clamp(1.25rem, 2vw, 1.55rem);
  font-weight: 700;
  letter-spacing: .03em;
}

.media-gallery-group-title p {
  color: #5f513d;
  font-family: var(--sans);
  font-size: .82rem;
}

.media-material-grid {
  display: grid;
  grid-template-columns: 1.35fr .65fr;
  gap: 1.1rem;
}

.media-material-grid .is-featured {
  grid-row: span 2;
}

.media-screenshot-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.1rem;
}

.media-gallery-card {
  min-width: 0;
  padding: .65rem .65rem .75rem;
  background: #ead8b3;
  border: 1px solid rgba(72, 54, 30, .35);
  box-shadow: 3px 4px rgba(62, 47, 29, .16);
  transition: transform 140ms ease, box-shadow 140ms ease;
}

.media-gallery-card:hover,
.media-gallery-card:focus-within {
  transform: translateY(-2px);
  box-shadow: 5px 7px rgba(62, 47, 29, .2);
}

.media-gallery-image {
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: #302a21;
  border: 1px solid rgba(72, 54, 30, .4);
}

.media-gallery-image:focus-visible,
.media-gallery-card figcaption a:focus-visible {
  outline: 3px solid #974832;
  outline-offset: 3px;
}

.media-gallery-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.media-gallery-card.is-logo .media-gallery-image {
  background: #f4ecd9;
}

.media-gallery-card.is-logo .media-gallery-image img {
  object-fit: contain;
}

.media-gallery-card figcaption {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  min-height: 3.25rem;
  padding: .45rem .1rem 0;
}

.media-gallery-card figcaption span {
  min-width: 0;
  font-size: .92rem;
  font-weight: 700;
  line-height: 1.45;
}

.media-gallery-card figcaption a {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  color: #873f2d;
  font-family: var(--sans);
  font-size: .76rem;
  font-weight: 700;
  text-underline-offset: .2em;
}

.media-gallery-card figcaption a:hover {
  color: #5f2d22;
}

@media (max-width: 900px) {
  .media-gallery-heading {
    grid-template-columns: 1fr;
  }

  .media-material-grid,
  .media-screenshot-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .media-material-grid .is-featured {
    grid-column: 1 / -1;
    grid-row: auto;
  }
}

@media (max-width: 560px) {
  .media-material-grid,
  .media-screenshot-grid {
    grid-template-columns: 1fr;
  }

  .media-material-grid .is-featured {
    grid-column: auto;
  }

  .media-gallery-card figcaption {
    align-items: flex-start;
  }
}

@media (prefers-reduced-motion: reduce) {
  .media-gallery-card {
    transition: none;
  }
}