.hero {
  background:
    linear-gradient(90deg, rgba(4, 14, 29, .97) 0%, rgba(7, 23, 46, .88) 46%, rgba(7, 23, 46, .7) 100%),
    linear-gradient(0deg, rgba(7, 23, 46, .5), rgba(7, 23, 46, .15)),
    url('assets/matchday/ufa-04.jpeg') center 48% / cover no-repeat;
}

.matchday { background: #f7f9fc; }
.matchday .section-head { align-items: end; }
.matchday-copy { max-width: 410px; color: #566474; line-height: 1.7; padding-bottom: 8px; }
.moment-grid { height: 650px; margin-top: 55px; display: grid; grid-template-columns: 1.2fr 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 12px; }
.moment-card { display: block; overflow: hidden; background: #cad4df; position: relative; }
.moment-card--tall { grid-row: 1 / 3; }
.moment-card--wide { grid-column: 2 / 4; }
.moment-card img { width: 100%; height: 100%; display: block; object-fit: cover; transition: transform .45s ease; }
.moment-card:hover img { transform: scale(1.035); }

.gallery-hero { height: min(760px, 80vh); min-height: 560px; position: relative; overflow: hidden; background: var(--navy); color: #fff; }
.gallery-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(3, 12, 26, .95) 0%, rgba(5, 20, 40, .68) 52%, rgba(5, 20, 40, .18) 100%), linear-gradient(0deg, rgba(3, 12, 26, .7), transparent 55%); }
.gallery-hero > img { width: 100%; height: 100%; object-fit: cover; object-position: center 48%; display: block; }
.gallery-hero-copy { position: absolute; z-index: 1; left: clamp(24px, 7vw, 110px); right: clamp(24px, 7vw, 110px); bottom: 70px; }
.gallery-hero h1 { max-width: 1080px; font: 900 clamp(56px, 7.8vw, 112px) / .8 'Barlow Condensed'; letter-spacing: -.035em; margin: 20px 0 24px; }
.gallery-hero h1 em { font-style: normal; color: var(--blue); -webkit-text-stroke: 1px #67b3ff; }
.gallery-hero-copy > p:last-child { color: #d7e3f3; font-size: 17px; }
.gallery-page { background: #f7f9fc; }
.gallery-note { max-width: 270px; text-align: right; color: #667386; line-height: 1.6; }
.gallery-grid { margin-top: 55px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.gallery-grid a { height: 520px; display: block; overflow: hidden; background: #cad4df; }
.gallery-grid a:nth-child(2), .gallery-grid a:nth-child(5), .gallery-grid a:nth-child(8) { height: 430px; }
.gallery-grid img { width: 100%; height: 100%; display: block; object-fit: cover; transition: transform .45s ease; }
.gallery-grid a:hover img { transform: scale(1.025); }
.gallery-grid a:focus-visible { outline: 4px solid var(--blue); outline-offset: 4px; }
.gallery-collection-head { margin-top: 70px; padding: 22px 0; display: flex; align-items: end; justify-content: space-between; gap: 24px; border-top: 1px solid #cad4df; border-bottom: 1px solid #cad4df; }
.gallery-collection-head p { margin: 0 0 6px; color: var(--blue); font-size: 11px; font-weight: 700; letter-spacing: .14em; }
.gallery-collection-head h3 { margin: 0; color: var(--navy); font: 800 34px 'Barlow Condensed'; }
.gallery-collection-head > span { color: #768699; font-size: 11px; font-weight: 700; letter-spacing: .12em; }
.gallery-collection-head + .gallery-grid { margin-top: 20px; }

@media (max-width: 850px) {
  .matchday .section-head { display: block; }
  .matchday-copy { margin-top: 28px; }
  .moment-grid { height: 720px; grid-template-columns: 1fr 1fr; }
  .moment-card--tall { grid-row: 1 / 2; }
  .moment-card--wide { grid-column: 1 / 3; }
  .gallery-grid { grid-template-columns: 1fr 1fr; }
  .gallery-grid a, .gallery-grid a:nth-child(2), .gallery-grid a:nth-child(5), .gallery-grid a:nth-child(8) { height: 460px; }
}

@media (max-width: 560px) {
  .hero { background-position: center 45%; }
  .moment-grid { height: auto; grid-template-columns: 1fr 1fr; grid-template-rows: none; }
  .moment-card, .moment-card--tall, .moment-card--wide { height: 260px; grid-row: auto; grid-column: auto; }
  .moment-card--wide { grid-column: 1 / 3; }
  .gallery-hero { height: 620px; min-height: 0; }
  .gallery-hero::after { background: linear-gradient(0deg, rgba(3, 12, 26, .96) 0%, rgba(5, 20, 40, .52) 75%, rgba(5, 20, 40, .2) 100%); }
  .gallery-hero-copy { bottom: 45px; }
  .gallery-hero h1 { font-size: clamp(48px, 14vw, 70px); }
  .gallery-page .section-head { display: block; }
  .gallery-note { text-align: left; margin-top: 22px; }
  .gallery-collection-head { margin-top: 50px; align-items: start; }
  .gallery-collection-head h3 { font-size: 28px; }
  .gallery-grid { grid-template-columns: 1fr; gap: 10px; }
  .gallery-grid a, .gallery-grid a:nth-child(2), .gallery-grid a:nth-child(5), .gallery-grid a:nth-child(8) { height: auto; aspect-ratio: 3 / 4; }
}