.s02,
.s02 *,
.s02 *::before,
.s02 *::after {
  box-sizing: border-box;
}

.s02 {
  position: relative;
  background: var(--grunn);
  color: var(--tekst);
}

.s02-ramme {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-areas:
    "hode   hode"
    "l1     l1"
    "stor   stor"
    "panel  trapp"
    "l2     l2"
    "gulv   gulv"
    "l3     l3"
    "lister dor"
    "slutt  slutt";
  column-gap: var(--s02-g);
  row-gap: var(--s02-g);
  max-width: var(--maks);
  margin: 0 auto;
  padding: var(--s02-topp) var(--marg) var(--s02-bunn);
}

.s02-hode {
  grid-area: hode;
  margin: 0 0 0.35rem;
}

.s02-merke {
  margin: 0 0 0.7rem;
  color: var(--tekst-demp);
  font-size: var(--tekst-liten);
  font-weight: 560;
  font-stretch: 110%;
  letter-spacing: 0.005em;
  line-height: 1.4;
}

.s02-tittel {
  max-width: 12em;
  margin: 0;
  color: var(--tekst);
  font-family: var(--font-display);
  font-size: var(--tekst-h2);
  font-weight: 500;
  font-stretch: var(--bredde-tittel);
  line-height: 0.98;
  letter-spacing: -0.035em;
  text-wrap: balance;
}

.s02-linjer {
  display: contents;
  margin: 0;
  padding: 0;
  list-style: none;
}

.s02-linje {
  margin: 1rem 0 0.1rem;
  list-style: none;
  color: var(--tekst);
  font-family: var(--font-display);
  font-size: var(--s02-linje-str);
  font-weight: 500;
  font-stretch: 104%;
  line-height: 1.25;
  letter-spacing: -0.012em;
  text-wrap: balance;
}

.s02-l1 {
  grid-area: l1;
  margin-top: 0.35rem;
}

.s02-l2 {
  grid-area: l2;
}

.s02-l3 {
  grid-area: l3;
}

.s02-foto {
  position: relative;
  min-width: 0;
  margin: 0;
}

.s02-f-stor {
  grid-area: stor;
  --s02-pos: 50% 56%;
}

.s02-f-panel {
  grid-area: panel;
  --s02-pos: 30% 50%;
}

.s02-f-trapp {
  grid-area: trapp;
  --s02-pos: 44% 50%;
}

.s02-f-gulv {
  grid-area: gulv;
  --s02-pos: 50% 62%;
}

.s02-f-lister {
  grid-area: lister;
  --s02-pos: 56% 34%;
}

.s02-f-dor {
  grid-area: dor;
  --s02-pos: 54% 50%;
}

.s02-vindu {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  border-radius: var(--s02-radius);
  background: var(--vindu-tom);
  box-shadow: var(--s02-skygge);
}

.s02-f-stor .s02-vindu {
  aspect-ratio: 4 / 3;
}

.s02-f-gulv .s02-vindu {
  aspect-ratio: 16 / 10;
}

.s02-vindu img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: var(--s02-pos, 50% 50%);
  transform-origin: var(--s02-pos, 50% 50%);
}

.s02-bildetekst {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 2.25rem clamp(0.75rem, 1.4vw, 1rem) clamp(0.6rem, 1.1vw, 0.85rem);
  border-radius: 0 0 var(--s02-radius) var(--s02-radius);
  background: var(--s02-skygge-tekst);
  color: var(--tekst-pa-bilde);
  font-size: var(--tekst-liten);
  font-weight: 500;
  letter-spacing: 0.005em;
  line-height: 1.3;
  pointer-events: none;
}

.s02-slutt {
  grid-area: slutt;
  margin-top: 1.1rem;
}

.s02-slutt-tittel {
  margin: 0;
  color: var(--tekst);
  font-family: var(--font-display);
  font-size: var(--s02-slutt-str);
  font-weight: 600;
  font-stretch: 106%;
  line-height: 1.2;
  letter-spacing: -0.012em;
  text-wrap: balance;
}

.s02-slutt-tekst {
  max-width: 30rem;
  margin: 0.45rem 0 0.25rem;
  color: var(--tekst-demp);
  font-size: var(--tekst-brod);
  line-height: 1.5;
}

.s02-lenke {
  font-size: var(--tekst-brod);
}

.s02-lenke:focus-visible {
  outline: 2px solid var(--tekst);
  outline-offset: 3px;
}

@media (min-width: 48rem) {
  .s02-vindu {
    aspect-ratio: 4 / 3;
  }

  .s02-f-gulv .s02-vindu {
    aspect-ratio: 2 / 1;
  }
}

@media (min-width: 64rem) {
  .s02-ramme {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-template-rows: auto auto minmax(0, 1fr) auto;
    grid-template-areas: none;
    row-gap: 0;
  }

  .s02-hode,
  .s02-linjer,
  .s02-slutt {
    grid-column: 1 / 5;
    padding-right: var(--s02-tekst-luft);
  }

  .s02-hode {
    grid-row: 1;
    margin: 0;
  }

  
  .s02-tittel {
    font-size: var(--s02-tittel-pinne);
  }

  .s02-linjer {
    display: block;
    grid-row: 2;
    margin-top: clamp(0.9rem, 3.2svh, 2rem);
  }

  .s02-linje,
  .s02-l1 {
    margin: 0;
    font-size: var(--s02-linje-pinne);
  }

  .s02-linje + .s02-linje {
    margin-top: 0.5em;
  }

  .s02-slutt {
    grid-row: 4;
    align-self: start;
    margin-top: var(--s02-g);
  }

  .s02-f-stor {
    grid-column: 5 / 10;
    grid-row: 1 / 4;
  }

  .s02-f-panel {
    grid-column: 10 / 13;
    grid-row: 1 / 4;
  }

  .s02-f-gulv,
  .s02-f-lister,
  .s02-f-dor,
  .s02-f-trapp {
    grid-row: 4;
    margin-top: var(--s02-g);
  }

  .s02-f-gulv {
    grid-column: 5 / 7;
  }

  .s02-f-lister {
    grid-column: 7 / 9;
  }

  .s02-f-dor {
    grid-column: 9 / 11;
  }

  .s02-f-trapp {
    grid-column: 11 / 13;
  }

  
  .s02-f-stor .s02-vindu {
    aspect-ratio: 4 / 3;
  }

  .s02-f-panel .s02-vindu {
    aspect-ratio: auto;
    height: 100%;
  }

  .s02-f-gulv .s02-vindu,
  .s02-f-lister .s02-vindu,
  .s02-f-dor .s02-vindu,
  .s02-f-trapp .s02-vindu {
    aspect-ratio: 1 / 1;
  }
}

html.liv .s02.s02-styrt {
  --s02-modus: flyt;
}

html.liv .s02.s02-styrt [data-s02-del]:focus-within {
  opacity: 1 !important;
  transform: none !important;
}

html.liv .s02.s02-flyt [data-s02-del] {
  transition: opacity 0.7s var(--ease-ut), transform 1s var(--ease-ut);
}

html.liv .s02.s02-flyt [data-s02-del]:not(.s02-inne) {
  opacity: 0;
  transform: translate3d(0, 1.75rem, 0);
}

html.liv .s02.s02-flyt .s02-vindu img {
  transition: transform 1.4s var(--ease-ut);
}

html.liv .s02.s02-flyt .s02-foto:not(.s02-inne) .s02-vindu img {
  transform: scale(1.08);
}

html.liv .s02.s02-flyt .s02-f-trapp,
html.liv .s02.s02-flyt .s02-f-dor {
  transition-delay: 0.08s;
}

@media (min-width: 64rem) {
  html.liv .s02.s02-flyt .s02-f-panel,
  html.liv .s02.s02-flyt .s02-f-lister {
    transition-delay: 0.07s;
  }

  html.liv .s02.s02-flyt .s02-f-dor {
    transition-delay: 0.14s;
  }

  html.liv .s02.s02-flyt .s02-f-trapp {
    transition-delay: 0.21s;
  }
}

@media (min-width: 64rem) and (min-height: 36rem) {
  html.liv .s02.s02-styrt:not(.s02-trang) {
    --s02-modus: pinne;
  }

  html.liv .s02.s02-styrt:not(.s02-trang) .s02-spor {
    height: calc(100svh + var(--s02-reise) * 100svh);
  }

  html.liv .s02.s02-styrt:not(.s02-trang) .s02-scene {
    position: sticky;
    top: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100svh;
    padding: calc(var(--nav-h) + var(--s02-scene-topp)) 0 var(--s02-scene-bunn);
    overflow: hidden;
  }

  html.liv .s02.s02-styrt:not(.s02-trang) .s02-ramme {
    width: 100%;
    height: 100%;
    max-height: calc(((min(100vw, var(--maks)) - 2 * var(--marg) - 11 * var(--s02-g)) * 5 / 12 + 4 * var(--s02-g)) / var(--s02-forhold) + var(--s02-rad-b));
    padding-top: 0;
    padding-bottom: 0;
    grid-template-rows: auto auto minmax(0, 1fr) minmax(var(--s02-rad-b), auto);
  }

  
  html.liv .s02.s02-styrt:not(.s02-trang) .s02-vindu {
    aspect-ratio: auto;
    height: 100%;
  }

  
  html.liv .s02.s02-styrt:not(.s02-trang) [data-s02-del],
  html.liv .s02.s02-styrt:not(.s02-trang) .s02-bildetekst {
    will-change: transform, opacity;
  }

  html.liv .s02.s02-styrt:not(.s02-trang) .s02-vindu img {
    will-change: transform;
  }
}