/* ============================================================
   Grandela Surf Club — the homepage's skin (redesign v1)
   Loaded AFTER system.css, on this page only: <body class="gs gs-home">.
   Source of truth: design-references/DESIGN-SYSTEM.md (§0.3 is this page).

   The homepage is the way in and the router. Its first screen is what
   we are, on the sand; a photograph that turns, with the title written
   on it; and four doors standing on its foot. Everything below is a component of the other
   pages (reviews, the last call, the footer, the bar) or one small band
   of its own (the family). Every class here is prefixed gs-, as in system.css.
   ============================================================ */

body.gs-home {
  /* The title is the slogan, two sentences of eighteen letters, always in English and
     always one above the other. On a phone it stands on the sand; from a tablet upwards
     it is written on the photograph, and its size follows the frame's width so that it
     always covers the same piece of each picture. */
  --gs-fs-display: clamp(2.25rem, 10.9vw, 4.5rem);
  --gs-home-head-h: 4.25rem;
  --gs-home-inset: clamp(1.1rem, 3.3vw, 3rem);     /* where the logo, the line under it and the title start */
  --gs-lap: 2.25rem;                               /* how far the doors climb onto the photograph */
  --gs-ink: var(--gs-mar);                         /* what the title is written in: see [data-ink] */
}
@media (min-width: 44.01rem) {
  /* 5.4vw with no floor that a tablet would reach: on a photograph the title must stay in proportion to the
     picture, or on a narrow screen it grows over what is beside it (measured: the barrel of the wave, the horse) */
  body.gs-home { --gs-fs-display: clamp(2.375rem, 5.4vw, 7.5rem); --gs-home-head-h: 4.75rem; --gs-lap: clamp(2rem, min(5vw, 7vh), 4.5rem); }
}
@media (min-width: 56rem) {
  body.gs-home { --gs-home-head-h: clamp(4.5rem, 3.9rem + 1.1vw, 5rem); }
}

/* ---------- the nav, on the sand ---------- */
.gs-home-head {
  display: grid; align-items: center; height: var(--gs-home-head-h);
  padding-inline: calc(var(--gs-s-3) + var(--gs-home-inset)); background: var(--gs-areia); color: var(--gs-mar);
}
.gs-home-head .gs-nav { margin: 0; }

/* ---------- the first screen ----------
   Phone: the title · what we are and the rating · the photograph · the doors.
   From a tablet upwards: what we are and the rating · the photograph, with the
   title written on it · the doors.
   The room system.css holds under a hero for the consent banner is for a hero
   that carries the booking button; this one hands over to the doors, which follow. */
.gs-home .gs-home-hero { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto auto auto; padding: 0 var(--gs-s-3) var(--gs-s-7); }
.gs-home-hero > h1 { grid-area: 1 / 1; padding: 0 var(--gs-home-inset) var(--gs-s-1); color: var(--gs-mar); }
.gs-home-hero > h1 span { display: block; }
.gs-home .gs-home-hero > .gs-hero-frame { grid-area: 3 / 1; min-height: 0; height: clamp(20rem, 50vw, 28rem); }
.gs-home .gs-hero-frame::after { display: none; }     /* no veil on the photographs: not the gradient under a dock either */
/* The ink of the title is the photograph's (home.js copies data-ink from the one that is up):
   Mar on a bright sky, Espuma on dark water. It changes at the photograph's pace, and only
   then — crossing a breakpoint must not set the title fading from one colour to the other. */
.gs-home-hero[data-ink="espuma"] { --gs-ink: var(--gs-espuma); }
.gs-home-hero.is-turning > h1 { transition: color 1.2s ease; }
/* Where the title is written in Espuma — on water, which is never as dark as a sky is bright —
   the corner it stands in is deepened with Mar: the same gradient, and the same 34% at most, that
   the system lays under the dock of the other pages. It is under the title and nowhere else; a
   photograph that carries the title in Mar has none. Measured with and without it (verify-home, 3). */
.gs-home .gs-hero-frame::before {
  content: ""; position: absolute; inset: 0 auto auto 0; z-index: -1; width: 100%; height: 40cqw; max-height: 100%; opacity: 0; pointer-events: none;
  background: radial-gradient(ellipse 100% 100% at 0 0, rgb(13 60 68 / .34) 0, rgb(13 60 68 / .34) 55%, rgb(13 60 68 / 0) 100%);
  transition: opacity 1.2s ease;
}
@media (min-width: 44.01rem) { .gs-home-hero[data-ink="espuma"] .gs-hero-frame::before { opacity: 1; } }

/* what we are, and the rating as reviews.js draws it in its compact mode, on one
   line under the title. The rating holds its height from the first paint and fills
   when there is a rating, so nothing below it moves. */
.gs-home-dock { grid-area: 2 / 1; display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--gs-s-5); min-width: 0; padding: 0 var(--gs-home-inset) var(--gs-s-2); color: var(--gs-mar); }
.gs-home-what { margin: 0; font: 500 var(--gs-fs-sub)/1.2 var(--gs-f-text); }
.gs-home-rating { display: flex; align-items: center; min-height: 2.5rem; min-width: 0; }
.gs-home-rating [data-reviews="compact"] { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--gs-s-3); margin: 0; color: var(--gs-rocha); }
.gs-home-rating [data-reviews="compact"][hidden] { display: none; }
.gs-home-rating .rv-sum { display: flex; flex-wrap: wrap; align-items: center; gap: .1rem .5rem; margin: 0; color: inherit; font: 500 var(--gs-fs-small)/1.2 var(--gs-f-text); }
body.gs .gs-home-rating .rv-stars { color: var(--gs-mar); }
.gs-home-rating .rv-sum-text { font-size: inherit; letter-spacing: 0; }
.gs-home-rating .rv-compact-link { display: inline-flex; align-items: center; min-height: 2.5rem; margin: 0; color: inherit; opacity: 1; font: 500 var(--gs-fs-caption)/1.2 var(--gs-f-text); letter-spacing: 0; text-transform: none; text-underline-offset: .2em; }
/* main.css draws the attribution at 75%: at 13px on the sand that is 3.6:1 */
.gs-home-rating .rv-attr { display: inline; margin: 0; flex-basis: auto; opacity: 1; color: var(--gs-rocha-2); font: 400 var(--gs-fs-caption)/1.2 var(--gs-f-text); letter-spacing: 0; text-transform: none; }

/* the photographs: one on top of the other, the one that is up is opaque */
.gs-slides { position: absolute; inset: 0; z-index: -2; }
.gs-slides img {
  position: absolute; inset: 0; width: 100%; height: 100% !important; max-width: none; object-fit: cover; object-position: var(--gs-pos, 50% 50%);
  opacity: 0; transition: opacity 1.2s ease;
}
.gs-slides img.is-on { opacity: 1; }
/* The crop, on a phone. Each photograph says which point of it matters (--gs-f, a fraction of its
   height) and where in the frame that point goes (--gs-c, a fraction of the part the
   doors leave free); --gs-keep is a row that must never be cropped away (a head).
   The frame is a wide band on a desktop, a shorter one on a laptop and a window on a
   phone: one percentage cannot hold a surfer in all three, this can. The sum assumes the
   photograph is drawn at the frame's width, which holds while the frame is wider than
   the photograph is: every frame here is kept at about 1.65:1 or wider (the widest photograph
   is 1.6:1), and if one ever were not, the picture is simply held at its top. */
@supports (container-type: size) {
  .gs-home .gs-hero-frame { container-type: size; }
  .gs-slides img {
    --gs-hd: calc(var(--gs-ar) * 100cqw);
    object-position: 50% clamp(min(0px, 100cqh - var(--gs-hd)), max(var(--gs-c) * (100cqh - var(--gs-lap)) - var(--gs-f) * var(--gs-hd), -1 * var(--gs-keep) * var(--gs-hd)), 0px);
  }
  /* From a tablet upwards the title is on the photograph, so the photograph is hung from
     its top instead (--gs-top: the row of it that sits at the top of the frame). The title
     and the picture both follow the frame's width: the same piece of sky or water is behind
     the title on every screen, and a taller frame only shows more underneath. */
  @media (min-width: 44.01rem) {
    .gs-slides img { object-position: 50% clamp(min(0px, 100cqh - var(--gs-hd)), -1 * var(--gs-top) * var(--gs-hd), 0px); }
  }
}
/* pause, and one dot for each photograph: on a plate, so they read on any of them */
.gs-slide-ctl {
  position: absolute; z-index: 3; top: clamp(1rem, 2.2vw, 1.75rem); right: var(--gs-home-inset);
  display: flex; align-items: center; padding: 0 var(--gs-s-2) 0 0; border-radius: var(--gs-r-ctl); color: var(--gs-espuma);
  background: var(--gs-mar-2); background: rgb(13 60 68 / .82); -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2);
}
.gs-slide-ctl[hidden] { display: none; }
.gs-slide-play, .gs-slide-dot { display: grid; place-items: center; height: 2.75rem; padding: 0; border: 0; border-radius: var(--gs-r-ctl); background: none; color: inherit; cursor: pointer; }
.gs-slide-play { width: 2.75rem; }
.gs-slide-play svg { width: 1.1rem; height: 1.1rem; }
.gs-slide-play .gs-i-play, .gs-slide-play.is-paused .gs-i-pause { display: none; }
.gs-slide-play.is-paused .gs-i-play { display: inline; }
.gs-slide-dots { display: flex; }
.gs-slide-dot { width: 1.5rem; }
/* a dot that is not the current one still has to be seen on the plate: 70% keeps it above 3:1 on any photograph */
.gs-slide-dot::before { content: ""; width: .5rem; height: .5rem; border-radius: 50%; background: currentColor; opacity: .7; transition: opacity .15s ease, scale .15s ease; }
.gs-slide-dot[aria-current="true"]::before { opacity: 1; scale: 1.4; }
body.gs .gs-slide-ctl :focus-visible { outline-color: var(--gs-espuma); outline-offset: -4px; }

/* ---------- the four doors ----------
   One link each: photograph, name, one line, and the lowest real price where
   there is one. Four rows shared by the cards of a row (subgrid), so names,
   lines and prices sit on the same lines whatever a translation runs to. */
.gs-doors {
  grid-area: 4 / 1; position: relative; z-index: 3; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gs-s-3);
  width: 100%; max-width: var(--gs-wrap); margin: calc(-1 * var(--gs-lap)) auto 0; padding-inline: calc(var(--gs-gutter) - var(--gs-s-3));
}
.gs-door {
  display: flex; flex-direction: column; min-width: 0; padding: .375rem .375rem var(--gs-s-3); border-radius: var(--gs-r-card);
  background: var(--gs-espuma); color: var(--gs-rocha); text-decoration: none; box-shadow: var(--gs-sombra);
  transition: transform .18s ease, box-shadow .18s ease;
}
@supports (grid-template-rows: subgrid) {
  .gs-door { display: grid; grid-row: span 4; grid-template-rows: subgrid; row-gap: 0; }
}
.gs-door-media { position: relative; display: block; aspect-ratio: 16 / 9; border-radius: calc(var(--gs-r-card) - .375rem); overflow: hidden; background: var(--gs-areia); }
.gs-door-media img { position: absolute; inset: 0; width: 100%; height: 100% !important; object-fit: cover; object-position: var(--gs-pos, 50% 50%); transition: scale .3s ease; }
/* a name breaks between its words, never inside one ("УРО-КИ СЁРФИНГА" on a narrow phone) */
.gs-door h2 { padding: var(--gs-s-3) var(--gs-s-3) 0; color: var(--gs-mar); -webkit-hyphens: manual; hyphens: manual; }
.gs-door-line { flex: 1 0 auto; margin: 0; padding: var(--gs-s-1) var(--gs-s-3) 0; font-size: var(--gs-fs-small); line-height: 1.35; color: var(--gs-rocha-2); }
.gs-door-foot { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--gs-s-2); margin: 0; padding: var(--gs-s-3) var(--gs-s-3) 0; color: var(--gs-mar); }
.gs-door-foot .gs-from { min-width: 0; gap: 0 .4rem; }
.gs-door-foot .gs-from b { font-size: var(--gs-fs-figure-sm); line-height: .85; }
/* "from €507" and, under it, the unit: the same two lines on both doors, whatever the figure runs to */
.gs-door-foot .gs-from > span { flex-basis: 100%; }
/* where there is no price, the foot says where the door leads: a link's own lettering */
.gs-door-label { min-width: 0; padding-bottom: .15em; font: 700 var(--gs-fs-ui)/1.1 var(--gs-f-display); letter-spacing: .05em; text-transform: uppercase; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .28em; }
.gs-door-go { flex: none; width: 2.25rem; height: 2.25rem; padding: .5rem; border-radius: 50%; background: var(--gs-mar); color: var(--gs-espuma); transition: translate .18s ease; }
@media (hover: hover) {
  .gs-door:hover { transform: translateY(-4px); box-shadow: 0 1.75rem 3rem -1.25rem rgb(13 60 68 / .7); }
  .gs-door:hover .gs-door-media img { scale: 1.04; }
  .gs-door:hover .gs-door-go { translate: 3px 0; }
}
/* the ring sits inside the card, on its own cream: outside it would be drawn on the photograph */
body.gs .gs-door:focus-visible { outline: 3px solid var(--gs-mar); outline-offset: -3px; }

/* ---------- the family: where we come from, beside what we do now ---------- */
.gs-home-family .gs-wrap { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2rem, 6vw, 6rem); align-items: center; }
.gs-home-family-text { display: grid; gap: var(--gs-s-4); justify-items: start; min-width: 0; }
.gs-home-family-text p { margin: 0; max-width: 34ch; font-size: var(--gs-fs-sub); line-height: 1.4; }
.gs-home-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gs-s-4); min-width: 0; }
.gs-home-pair figure { display: grid; gap: var(--gs-s-2); align-content: start; margin: 0; }
.gs-home-pic { position: relative; display: block; aspect-ratio: 4 / 5; border-radius: var(--gs-r-card); overflow: hidden; background: var(--gs-oliva-2); }
.gs-home-pic img { position: absolute; inset: 0; width: 100%; height: 100% !important; object-fit: cover; object-position: var(--gs-pos, 50% 50%); }
/* main.css gives every figcaption a muted ink of its own: on Oliva only Espuma reads */
.gs-home-pair figcaption { margin: 0; padding: 0; font: 400 var(--gs-fs-caption)/1.4 var(--gs-f-text); color: var(--gs-espuma); text-align: left; }

/* ---------- the last call: the button, then the two doors that sell, side by side ---------- */
.gs-home .gs-final .gs-acts { display: grid; justify-items: start; gap: var(--gs-s-2); }
.gs-home-also { display: flex; flex-wrap: wrap; gap: 0 var(--gs-s-5); }

/* ---------- the bar on this page: the two doors that sell, in place of a price ---------- */
.gs-bar-doors { display: none; margin: 0; }
.gs-bar-wa { display: none; place-content: center; flex: none; width: 2.75rem; height: 2.75rem; border-radius: 50%; color: inherit; box-shadow: inset 0 0 0 1.5px currentColor; }
.gs-bar-wa svg { width: 1.3rem; height: 1.3rem; }

/* ============================================================ */
@media (min-width: 44.01rem) {
  /* from a tablet upwards the title is written on the photograph, top left, in the ink
     that photograph was measured for; what we are and the rating stay on the sand above */
  .gs-home .gs-home-hero { --gs-title-top: clamp(.75rem, 2vw, 1.75rem); grid-template-rows: auto auto; }
  .gs-home .gs-home-hero > .gs-hero-frame { grid-area: 1 / 1; }
  .gs-home-hero > h1 { grid-area: 1 / 1; z-index: 2; align-self: start; justify-self: start; padding: var(--gs-title-top) var(--gs-home-inset) 0; color: var(--gs-ink); pointer-events: none; }
  /* Under the title, on the photograph (owner, 2026-10-12): what we are, written like the title in the
     photograph's ink (24px is large text: it is measured with the title); and, apart from it, the
     rating on a plate of deep water, so that its small text never depends on the picture. */
  .gs-home-dock {
    grid-area: 1 / 1; z-index: 2; align-self: start; justify-self: start; display: grid; gap: var(--gs-s-3); justify-items: start;
    margin: calc(var(--gs-title-top) + var(--gs-fs-display) * 1.72 + .5vw) var(--gs-home-inset) 0; padding: 0;
  }
  .gs-home-what { color: var(--gs-ink); font-size: clamp(.8125rem, 1.7vw, 1.75rem); }
  .gs-home-hero.is-turning .gs-home-what { transition: color 1.2s ease; }
  .gs-home-rating { padding: 0 var(--gs-s-4); border-radius: var(--gs-r-ctl); color: var(--gs-espuma); background: var(--gs-mar-2); background: rgb(13 60 68 / .82);
    -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2); }
  .gs-home-rating:has([data-reviews][hidden]) { visibility: hidden; }
  .gs-home-rating [data-reviews="compact"], .gs-home-rating .rv-attr { color: inherit; }
  body.gs .gs-home-rating .rv-stars { color: var(--gs-areia); }
  body.gs .gs-home-dock :focus-visible { outline-color: var(--gs-espuma); }
  .gs-doors { grid-area: 2 / 1; }
}
@media (min-width: 56rem) {
  /* from a tablet on its side upwards: the doors four across, and the photograph takes
     what they leave of the screen, so the whole router is in sight without scrolling.
     The first screen stops growing on a screen taller than about 1080px, and before the
     photograph could become taller than 1.65:1. */
  .gs-home .gs-home-hero { grid-template-rows: minmax(15rem, 1fr) auto; min-height: min(calc(100vh - var(--gs-home-head-h)), 63rem, calc(57vw + 20rem)); padding-bottom: var(--gs-s-4); }
  @supports (height: 1svh) { .gs-home .gs-home-hero { min-height: min(calc(100svh - var(--gs-home-head-h)), 63rem, calc(57vw + 20rem)); } }
  .gs-home .gs-home-hero > .gs-hero-frame { height: auto; }
  .gs-doors { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gs-s-4); }
}
@media (min-width: 56rem) and (max-height: 45rem) {
  /* a short laptop (a 768px screen leaves a browser about 650px): the doors and their
     prices come first, so the nav, the title and the pictures on the doors give up some height */
  body.gs-home { --gs-home-head-h: 4.25rem; --gs-fs-display: clamp(2.75rem, 3.9vw, 4rem); }
  .gs-home-head .gs-mark img { height: 2.75rem; }
  .gs-home .gs-home-hero { --gs-title-top: var(--gs-s-3); grid-template-rows: minmax(13rem, 1fr) auto; padding-bottom: var(--gs-s-3); }
  .gs-home-dock { margin-top: calc(var(--gs-title-top) + var(--gs-fs-display) * 1.72 + var(--gs-s-2)); }
  .gs-home-rating, .gs-home-rating .rv-compact-link { min-height: 2rem; }
  .gs-door-media { aspect-ratio: 2.2 / 1; }
}
@media (min-width: 44.01rem) and (max-width: 55.99rem) and (max-height: 30rem) {
  /* a phone on its side: the photograph must not take the whole screen */
  .gs-home .gs-home-hero > .gs-hero-frame { height: clamp(9rem, calc(100vh - 15rem), 20rem); }
}
@media (max-width: 64rem) {
  .gs-home-family .gs-wrap { grid-template-columns: minmax(0, 1fr); gap: var(--gs-s-6); }
}
@media (max-width: 44rem) {
  .gs-home-head { padding-inline: calc(var(--gs-s-2) + var(--gs-s-3)); }
  /* phone: the title stands on the sand, as on the other pages; the photograph gives the
     first row of doors the room it needs on a short screen */
  .gs-home .gs-home-hero { min-height: 0; padding: 0 var(--gs-s-2) var(--gs-s-6); }
  /* i18n.js offers the visitor's own language once, in a card under the switcher — which on a
     phone is where the title is written. The card drops onto the photograph: home.js measures
     how far that is (the tagline runs to one line or two) and it goes when it is answered. */
  .gs-home-head .lang-inline .lang-nudge { top: calc(100% + var(--gs-nudge-drop, .55rem)); }
  /* the title needs air under the logo and the menu (owner: it sat too close to them) */
  .gs-home-hero > h1 { padding: var(--gs-s-5) var(--gs-s-3) var(--gs-s-2); }
  .gs-home-dock { padding: 0 var(--gs-s-3) var(--gs-s-3); }
  .gs-home-rating { min-height: 1.5rem; }
  .gs-home-rating [data-reviews="compact"] { gap: 0 .5rem; }
  .gs-home-rating .rv-sum { font-size: var(--gs-fs-caption); }
  .gs-home-rating .rv-compact-link { display: none; }
  .gs-home .gs-home-hero > .gs-hero-frame { height: clamp(8.5rem, min(calc(100vh - 31.25rem), 57vw), 15rem); overflow: hidden; background: var(--gs-agua); border-radius: var(--gs-r-photo); }
  @supports (height: 1svh) { .gs-home .gs-home-hero > .gs-hero-frame { height: clamp(8.5rem, min(calc(100svh - 31.25rem), 57vw), 15rem); } }
  /* system.css tightens the hero while the consent banner is on its way; nothing here needs to give way to it */
  html.gs-first-visit .gs-home-head .gs-mark img { height: 2.5rem; }
  .gs-slide-ctl { top: var(--gs-s-2); right: var(--gs-s-2); }
  .gs-slide-play, .gs-slide-dot { height: 2.5rem; }
  .gs-slide-play { width: 2.5rem; }

  /* the cards run to the photograph's own edges, so its rounded foot is not left showing beside them */
  .gs-doors { gap: var(--gs-s-2); padding-inline: 0; }
  .gs-door { padding: .25rem .25rem var(--gs-s-3); }
  .gs-door-media { border-radius: calc(var(--gs-r-card) - .25rem); }
  .gs-door h2 { padding: var(--gs-s-2) var(--gs-s-2) 0; font-size: 1.5rem; }
  .gs-door-line { padding-inline: var(--gs-s-2); font-size: .875rem; line-height: 1.3; }
  .gs-door-foot { padding: var(--gs-s-2) var(--gs-s-2) 0; }
  .gs-door-foot .gs-from { gap: 0 .3rem; }
  .gs-door-foot .gs-from small, .gs-door-foot .gs-from > span { font-size: var(--gs-fs-tag); }
  .gs-door-foot .gs-from b { font-size: var(--gs-fs-heading); }
  .gs-door-label { font-size: var(--gs-fs-label); }
  .gs-door-go { width: 1.875rem; height: 1.875rem; padding: .4rem; }

  .gs-home-family-text p { font-size: var(--gs-fs-body); }
  .gs-home-pair { gap: var(--gs-s-3); }

  /* the bar under the thumb: the two doors, WhatsApp, the menu */
  .gs-home .gs-bar-doors { display: flex; gap: var(--gs-s-4); margin-right: auto; min-width: 0; }
  .gs-bar-doors a { display: inline-flex; align-items: center; min-height: 2.75rem; color: inherit; white-space: nowrap; font: 700 var(--gs-fs-label)/1 var(--gs-f-display); letter-spacing: .06em; text-transform: uppercase; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .28em; }
  .gs-home .gs-bar .gs-cta { display: none; }
  .gs-home .gs-bar-wa { display: grid; }
  .gs-home .gs-bar .gs-nav-tools { gap: var(--gs-s-2); }
}
@media (max-width: 22.5rem) {
  /* the narrowest phones: menu and WhatsApp are what the bar is for */
  .gs-home .gs-bar-doors { display: none; }
  .gs-home .gs-bar .gs-nav-tools { flex: 1; justify-content: space-between; }
}
@media (prefers-reduced-motion: reduce) {
  .gs-slides img, .gs-home .gs-hero-frame::before, .gs-home-hero.is-turning > h1, .gs-home-hero.is-turning .gs-home-what, .gs-door, .gs-door-media img, .gs-door-go, .gs-slide-dot::before { transition: none; }
  .gs-door:hover { transform: none; }
  .gs-door:hover .gs-door-media img { scale: 1; }
}
@media (forced-colors: active) {
  .gs-door, .gs-slide-ctl { border: 1px solid; }
}