/* PS Digital Media, site styles.
   Brand: petrol, ocean, stone, off white, with lilac as a sparing highlight.
   Type: Epilogue only. Sizes and spacing are fluid (clamp) between 375px and 1920px wide screens. */

@font-face { font-family: "Epilogue"; src: url("../fonts/epilogue-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Epilogue"; src: url("../fonts/epilogue-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Epilogue"; src: url("../fonts/epilogue-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }

:root {
  /* Colour */
  --petrol: #023246;
  --ocean: #287094;
  --stone: #D4D4CE;
  --offwhite: #F6F6F6;
  --lilac: #C7B8EA;
  --ink: #1F2B30;
  --slate: #56626A;

  /* Type scale (same clamp values as the old Elementor setup) */
  --fs-display: clamp(3.5rem, 2.77184rem + 3.1068vw, 6.5rem);
  --fs-xxxl: clamp(3rem, 2.75728rem + 1.0356vw, 4rem);
  --fs-xxl: clamp(2.5rem, 2.25728rem + 1.0356vw, 3.5rem);
  --fs-xl: clamp(2rem, 1.75728rem + 1.0356vw, 3rem);
  --fs-l: clamp(1.5rem, 1.25728rem + 1.0356vw, 2.5rem);
  --fs-xm: clamp(1.25rem, 1.06796rem + 0.7767vw, 2rem);
  --fs-m: clamp(1.2rem, 1.12718rem + 0.31068vw, 1.5rem);
  --fs-s: clamp(1.1rem, 1.06359rem + 0.15534vw, 1.25rem);
  --fs-xs: clamp(1rem, 0.97087rem + 0.12427vw, 1.12rem);
  --fs-caption: 0.9375rem;

  /* Layout */
  --page-max: 1200px;
  --gutter: clamp(1.25rem, 0.76rem + 2.1vw, 5rem);        /* 20px to 80px side padding */
  --space-s: clamp(2.5rem, 2rem + 2vw, 4.5rem);
  --space-m: clamp(3.5rem, 2.6rem + 3.8vw, 7rem);
  --space-l: clamp(4.5rem, 3.3rem + 5vw, 9rem);
  --space-xl: clamp(5.5rem, 4rem + 6.3vw, 11rem);
  --radius: 4px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; animation: none !important; } }

body {
  margin: 0;
  background: var(--offwhite);
  color: var(--ink);
  font-family: "Epilogue", "Helvetica Neue", Arial, sans-serif;
  font-size: var(--fs-s);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; height: auto; }
a { color: var(--ocean); text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
a:hover { color: var(--petrol); }
:focus-visible { outline: 3px solid var(--ocean); outline-offset: 3px; }
.on-dark :focus-visible { outline-color: var(--lilac); }
h1, h2, h3, p, ul, figure, blockquote { margin: 0; }
ul { padding: 0; list-style: none; }

.skip-link { position: absolute; left: -9999px; top: 0; background: var(--lilac); color: var(--petrol); padding: 0.75rem 1rem; z-index: 100; font-weight: 600; }
.skip-link:focus { left: 1rem; top: 1rem; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Type */
.t-display { font-size: var(--fs-display); line-height: 1.02; letter-spacing: -0.02em; font-weight: 600; }
.t-xxxl { font-size: var(--fs-xxxl); line-height: 1.05; letter-spacing: -0.02em; font-weight: 600; }
.t-xxl { font-size: var(--fs-xxl); line-height: 1.1; letter-spacing: -0.015em; font-weight: 600; }
.t-xl { font-size: var(--fs-xl); line-height: 1.15; letter-spacing: -0.01em; font-weight: 600; }
.t-l { font-size: var(--fs-l); line-height: 1.25; font-weight: 600; }
.t-xm { font-size: var(--fs-xm); line-height: 1.35; font-weight: 500; }
.t-m { font-size: var(--fs-m); line-height: 1.55; }
.t-s { font-size: var(--fs-s); line-height: 1.65; }
.t-xs { font-size: var(--fs-xs); line-height: 1.6; }
.t-caption { font-size: var(--fs-caption); line-height: 1.5; color: var(--slate); }
.t-label { font-size: var(--fs-xs); font-weight: 600; color: var(--ocean); }
.prose p + p { margin-top: 1em; }
.measure { max-width: 38em; }

/* Colour contexts */
.bg-petrol { background: var(--petrol); color: var(--offwhite); }
.bg-ocean { background: var(--ocean); color: var(--offwhite); }
.bg-stone { background: var(--stone); }
.c-petrol { color: var(--petrol); }
.c-slate { color: var(--slate); }
.bg-petrol .t-label { color: var(--lilac); }
.bg-ocean .t-label { color: var(--offwhite); }
.bg-petrol .t-caption, .bg-petrol .c-slate { color: var(--stone); }
.bg-petrol a, .bg-ocean a { color: var(--offwhite); }
.bg-petrol a:hover, .bg-ocean a:hover { color: var(--lilac); }

/* Sections and containers (same idea as the old section-* classes) */
.section { padding-inline: var(--gutter); }
.section > .inner { max-width: var(--page-max); margin-inline: auto; }
.section-s { padding-block: var(--space-s); }
.section-m { padding-block: var(--space-m); }
.section-l { padding-block: var(--space-l); }
.section-xl { padding-block: var(--space-xl); }
.stack > * + * { margin-top: var(--stack, 1.5rem); }
.rule-top { border-top: 1px solid var(--stone); }
.rule-top-strong { border-top: 1px solid var(--petrol); }
.bg-petrol .rule-top { border-color: rgba(212, 212, 206, 0.35); }

/* Buttons and links */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0.85rem 1.6rem; border-radius: var(--radius); font: inherit; font-size: var(--fs-xs); font-weight: 600; line-height: 1.2; text-decoration: none; border: 0; cursor: pointer; }
.btn-lilac { background: var(--lilac); color: var(--petrol); }
.btn-lilac:hover { background: #b6a3e2; color: var(--petrol); }
.btn-petrol { background: var(--petrol); color: var(--offwhite); }
.btn-petrol:hover { background: #01455f; color: var(--offwhite); }
.text-link { font-size: var(--fs-xs); font-weight: 600; text-decoration: underline; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.75rem; }

/* Header */
.site-header { position: sticky; top: 0; z-index: 50; background: var(--offwhite); border-bottom: 1px solid var(--stone); padding-inline: var(--gutter); }
.site-header .inner { max-width: var(--page-max); margin-inline: auto; display: flex; align-items: center; justify-content: space-between; gap: 2rem; min-height: 84px; }
.brand img { width: 52px; height: auto; }
.nav { display: flex; align-items: center; gap: clamp(1.25rem, 2vw, 2.25rem); }
.nav a { color: var(--ink); text-decoration: none; font-size: var(--fs-xs); font-weight: 500; }
.nav a:hover, .nav a[aria-current="page"] { color: var(--ocean); }
.nav a[aria-current="page"] { text-decoration: underline; text-underline-offset: 0.45em; }
.nav .btn { color: var(--petrol); text-decoration: none; }
.nav-toggle { display: none; background: none; border: 0; padding: 0.5rem; min-width: 48px; min-height: 48px; cursor: pointer; color: var(--petrol); }
.nav-toggle svg { width: 28px; height: 28px; }

@media (max-width: 900px) {
  .nav-toggle { display: inline-flex; align-items: center; justify-content: center; }
  .nav { display: none; position: absolute; left: 0; right: 0; top: 100%; flex-direction: column; align-items: flex-start; gap: 0; background: var(--offwhite); border-bottom: 1px solid var(--stone); padding: 0.5rem var(--gutter) 1.5rem; }
  .nav.is-open { display: flex; }
  .nav a { display: block; width: 100%; padding: 0.9rem 0; border-top: 1px solid var(--stone); font-size: var(--fs-s); }
  .nav .btn { margin-top: 1rem; width: auto; border-top: 0; padding: 0.85rem 1.6rem; }
}

/* Footer */
.site-footer { padding-inline: var(--gutter); padding-block: var(--space-m) 2rem; }
.site-footer .inner { max-width: var(--page-max); margin-inline: auto; }
.footer-top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 2.5rem; }
.footer-logo { width: 130px; }
.footer-contact { display: grid; gap: 0.4rem; font-size: var(--fs-xs); }
.footer-contact a { text-decoration: none; }
.footer-bottom { margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid rgba(212, 212, 206, 0.35); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; font-size: var(--fs-caption); color: var(--stone); }

/* Hero */
.hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.72fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.hero-text { display: grid; gap: clamp(1.5rem, 2.5vw, 2.25rem); }
.hero-foot { border-top: 1px solid var(--stone); padding-top: 1.5rem; display: grid; gap: 1.25rem; }
.hero-photo img { width: 100%; height: clamp(26rem, 45vw, 40rem); object-fit: cover; object-position: top center; }
@media (max-width: 800px) { .hero { grid-template-columns: 1fr; } .hero-photo img { height: 28rem; } }

/* Two column label rows */
.split { display: grid; grid-template-columns: minmax(0, 13rem) minmax(0, 1fr); gap: 1.5rem clamp(2rem, 4vw, 4rem); }
@media (max-width: 760px) { .split { grid-template-columns: 1fr; } }

/* Price list */
.section-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 1.5rem 3rem; }
.section-head .note { max-width: 24rem; color: var(--slate); font-size: var(--fs-xs); }
.price-group { border-top: 1px solid var(--petrol); padding-top: 1.25rem; }
.price-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.5rem 2rem; padding: 1rem 0 1.5rem; }
.price-row + .price-row { border-top: 1px solid var(--stone); }
.price-row .price { text-align: right; }
.price-row .per { display: block; font-size: var(--fs-xs); font-weight: 400; color: var(--slate); }
@media (max-width: 560px) { .price-row { grid-template-columns: 1fr; } .price-row .price { text-align: left; } }

/* Photo band with quote */
.photo-band { position: relative; min-height: clamp(30rem, 50vw, 45rem); display: flex; align-items: flex-end; background: var(--petrol) center / cover no-repeat; }
.photo-band img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 35%; }
.photo-band figure { position: relative; width: min(100%, 40rem); padding: clamp(2rem, 4vw, 3.5rem); }
.photo-band figcaption { margin-top: 1.25rem; color: var(--lilac); font-size: var(--fs-xs); }

/* Work list (home) */
.work-list li { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 18rem) 4rem 9rem; gap: 1.5rem; align-items: center; padding: 1.5rem 0; border-top: 1px solid rgba(212, 212, 206, 0.35); }
.work-list li:last-child { border-bottom: 1px solid rgba(212, 212, 206, 0.35); }
.work-list a { text-decoration: none; }
.work-list a:hover { text-decoration: underline; }
.work-list img { width: 9rem; height: 5.6rem; object-fit: cover; object-position: top center; border-radius: var(--radius); }
.work-list .meta { color: var(--stone); font-size: var(--fs-xs); }
@media (max-width: 760px) { .work-list li { grid-template-columns: 1fr; gap: 0.4rem; } .work-list img { width: 100%; height: 11rem; margin-top: 0.75rem; } }

/* About teaser and general media split */
.media-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.media-split img { width: 100%; height: clamp(20rem, 36vw, 33rem); object-fit: cover; }
@media (max-width: 800px) { .media-split { grid-template-columns: 1fr; } }

/* Call to action band */
.cta-row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 1.5rem 3rem; margin-top: 2rem; }
.cta-row p { max-width: 36rem; }

/* Page head */
.page-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 24rem); gap: 1.5rem 4rem; align-items: end; }
@media (max-width: 860px) { .page-head { grid-template-columns: 1fr; } }

/* Packages (ways page) */
.package { display: grid; padding-top: 1.5rem; grid-template-columns: minmax(0, 13rem) minmax(0, 1fr) minmax(0, 22rem); gap: 1.5rem clamp(2rem, 4vw, 4rem); border-top: 1px solid var(--petrol); }
.package .price-line { display: flex; align-items: baseline; gap: 0.6rem; }
.package .includes li { padding: 0.65rem 0; border-top: 1px solid var(--stone); font-size: var(--fs-xs); }
.package .includes li:last-child { border-bottom: 1px solid var(--stone); }
.bg-petrol .package .includes li { border-color: rgba(212, 212, 206, 0.35); }
.package .good-for { font-size: var(--fs-xm); font-weight: 500; line-height: 1.35; color: var(--petrol); }
.bg-petrol .package .good-for { color: var(--offwhite); }
@media (max-width: 1024px) { .package { grid-template-columns: minmax(0, 13rem) minmax(0, 1fr); } .package > :last-child { grid-column: 2; } }
@media (max-width: 760px) { .package { grid-template-columns: 1fr; } .package > :last-child { grid-column: auto; } }

.steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2rem; counter-reset: step; }
.steps li { border-top: 1px solid var(--petrol); padding-top: 1.5rem; display: grid; gap: 0.75rem; align-content: start; }
.steps .num { font-size: var(--fs-xxl); font-weight: 600; line-height: 1; color: var(--ocean); }
@media (max-width: 960px) { .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .steps { grid-template-columns: 1fr; } }

.faq > div { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr); gap: 1rem 3rem; padding: 1.75rem 0; border-top: 1px solid var(--stone); }
.faq > div:last-child { border-bottom: 1px solid var(--stone); }
@media (max-width: 760px) { .faq > div { grid-template-columns: 1fr; } }

/* Work page */
.featured-img { width: 100%; height: clamp(18rem, 42vw, 38rem); object-fit: cover; object-position: top center; border: 1px solid var(--stone); }
.facts li { display: flex; justify-content: space-between; gap: 1rem; padding: 0.75rem 0; border-top: 1px solid var(--stone); font-size: var(--fs-xs); }
.facts li:last-child { border-bottom: 1px solid var(--stone); }
.facts span:first-child { color: var(--slate); }
.featured { display: grid; grid-template-columns: minmax(0, 13rem) minmax(0, 1fr) minmax(0, 20rem); gap: 1.5rem clamp(2rem, 4vw, 4rem); border-top: 1px solid var(--petrol); padding-top: 1.5rem; }
@media (max-width: 1024px) { .featured { grid-template-columns: 1fr; } }
.project-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(2.5rem, 5vw, 4.5rem) clamp(1.5rem, 3vw, 3rem); }
.project-grid img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: top center; border: 1px solid var(--stone); }
.project-grid .caption { border-top: 1px solid var(--petrol); margin-top: 1.25rem; padding-top: 1rem; display: grid; gap: 0.3rem; }
.project-grid a { text-decoration: none; color: inherit; }
.project-grid a:hover h3 { text-decoration: underline; }
@media (max-width: 760px) { .project-grid { grid-template-columns: 1fr; } }

/* About page */
.full-photo img { width: 100%; height: clamp(20rem, 48vw, 45rem); object-fit: cover; }
.story { display: grid; grid-template-columns: minmax(0, 13rem) minmax(0, 1fr) minmax(0, 20rem); gap: 2rem clamp(2rem, 4vw, 4rem); }
.story img { width: 100%; height: clamp(22rem, 36vw, 34rem); object-fit: cover; object-position: top center; }
@media (max-width: 1024px) { .story { grid-template-columns: minmax(0, 13rem) minmax(0, 1fr); } .story > :last-child { grid-column: 2; max-width: 24rem; } }
@media (max-width: 760px) { .story { grid-template-columns: 1fr; } .story > :last-child { grid-column: auto; } }
.values { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; }
.values li { border-top: 1px solid rgba(212, 212, 206, 0.35); padding-top: 1.75rem; display: grid; gap: 0.75rem; align-content: start; }
@media (max-width: 800px) { .values { grid-template-columns: 1fr; } }

/* Contact page */
.contact-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 36rem); gap: clamp(2.5rem, 6vw, 6rem); align-items: start; }
@media (max-width: 1024px) { .contact-grid { grid-template-columns: 1fr; } }
.contact-photo { width: 100%; height: clamp(16rem, 28vw, 25rem); object-fit: cover; }
.form-card { background: var(--stone); padding: clamp(1.75rem, 3vw, 3rem); border-radius: 8px; }
.form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem 1rem; margin-top: 1.5rem; }
.form .full { grid-column: 1 / -1; }
@media (max-width: 560px) { .form { grid-template-columns: 1fr; } }
.field { display: grid; gap: 0.4rem; }
.field label, .form legend { font-size: var(--fs-xs); font-weight: 600; color: var(--petrol); }
.field input, .field textarea { width: 100%; font: inherit; font-size: 1rem; color: var(--ink); background: #fff; border: 1px solid #b9b9b2; border-radius: var(--radius); padding: 0.8rem 0.9rem; min-height: 48px; }
.field textarea { min-height: 9rem; resize: vertical; }
.field input:focus-visible, .field textarea:focus-visible { outline: 3px solid var(--ocean); outline-offset: 1px; border-color: var(--ocean); }
.form fieldset { border: 0; padding: 0; margin: 0; }
.choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.25rem 1rem; margin-top: 0.5rem; }
@media (max-width: 560px) { .choices { grid-template-columns: 1fr; } }
.choices label { display: flex; align-items: center; gap: 0.6rem; min-height: 44px; font-size: var(--fs-xs); font-weight: 400; color: var(--ink); cursor: pointer; }
.choices input { width: 20px; height: 20px; accent-color: var(--ocean); margin: 0; }
.hp { position: absolute; left: -9999px; }
.form-note { font-size: var(--fs-caption); color: var(--slate); }
.alert { padding: 1rem 1.25rem; border-radius: var(--radius); background: #fff; border-left: 4px solid var(--ocean); font-size: var(--fs-xs); }

/* Motion
   One quiet entrance per page (the opening words and photo), one reveal for the quote over the photo band,
   and small responses when you hover or tap. Everything is switched off for visitors who prefer reduced motion. */
@media (prefers-reduced-motion: no-preference) {
  @keyframes ps-rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
  @keyframes ps-unveil { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0 0 0 0); } }
  @keyframes ps-menu { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

  .js .hero-text > *, .js .intro > * { opacity: 0; animation: ps-rise 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) forwards; }
  .js .hero-text > :nth-child(2), .js .intro > :nth-child(2) { animation-delay: 0.12s; }
  .js .hero-text > :nth-child(3), .js .intro > :nth-child(3) { animation-delay: 0.24s; }
  .js .hero-text > :nth-child(4), .js .intro > :nth-child(4) { animation-delay: 0.36s; }
  .js .hero-text > :nth-child(n+5), .js .intro > :nth-child(n+5) { animation-delay: 0.44s; }

  .js .hero-photo img, .js .full-photo img { animation: ps-unveil 1.2s 0.2s cubic-bezier(0.65, 0, 0.35, 1) both; }

  .js .photo-band figure { opacity: 0; transform: translateY(28px); transition: opacity 0.9s ease, transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1); }
  .js .photo-band figure.is-visible { opacity: 1; transform: none; }

  .btn { transition: background-color 0.2s ease, transform 0.2s ease; }
  .btn:hover { transform: translateY(-2px); }
  .btn:active { transform: none; }
  a { transition: color 0.2s ease, text-underline-offset 0.2s ease; }
  .text-link:hover { text-underline-offset: 0.35em; }

  .work-list img, .project-grid img { transition: transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1); }
  .project-grid a:hover img { transform: translateY(-6px); }
  @media (hover: hover) { .work-list li:hover img { transform: scale(1.04); } }

  .nav.is-open { animation: ps-menu 0.25s ease-out; }
}

/* Layout refinements (v3) */

/* Quote over the photo band lines up with the page content on wide screens */
.photo-band figure { margin-left: max(0px, calc((100vw - var(--page-max)) / 2 - var(--gutter))); }

/* Recent work list on tablets: name and details on the left, thumbnail on the right */
@media (max-width: 1024px) and (min-width: 761px) {
  .work-list li { grid-template-columns: minmax(0, 1fr) 9rem; grid-template-rows: auto auto; column-gap: 2rem; row-gap: 0.35rem; }
  .work-list li h3 { grid-column: 1; grid-row: 1; }
  .work-list li .meta:nth-of-type(1) { grid-column: 1; grid-row: 2; }
  .work-list li .meta:nth-of-type(2) { display: none; }
  .work-list li img { grid-column: 2; grid-row: 1 / span 2; }
}

/* Prices never break in the middle ("from R180" stays together) */
.price-line { flex-wrap: wrap; row-gap: 0.25rem; }
.price-line .t-xxl, .price-row .price { white-space: nowrap; }
.price-row .price .per { white-space: normal; }

/* Package headings get a comfortable measure on very wide screens */
.package h2 { max-width: 16ch; }

/* Slightly calmer section spacing on small phones */
@media (max-width: 480px) {
  :root { --space-l: 4rem; --space-xl: 4.75rem; }
}

/* Photography gallery on the Ways to work with me page */
.photo-gallery-wrap { margin-top: clamp(2rem, 4vw, 3rem); container-type: inline-size; }
.photo-gallery { display: grid; gap: 1rem; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 13rem; grid-auto-rows: calc((100cqw - 3rem) / 4 * 0.75); grid-template-areas: "g v v n" "g c w b" "r r t b"; }
.photo-gallery figure { margin: 0; position: relative; min-height: 0; }
.photo-gallery img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius); }
.pg-r img { object-position: center 70%; }
.pg-g { grid-area: g; } .pg-v { grid-area: v; } .pg-n { grid-area: n; } .pg-c { grid-area: c; } .pg-b { grid-area: b; } .pg-w { grid-area: w; } .pg-t { grid-area: t; } .pg-r { grid-area: r; }
@media (max-width: 760px) { .photo-gallery { gap: 0.6rem; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 8rem; grid-auto-rows: calc((100cqw - 0.6rem) / 2 * 0.75); grid-template-areas: "g v" "g n" "c b" "w b" "r t"; } }