main > section {
  padding: var(--sektion) var(--matt);
  max-width: var(--max);
  margin-inline: auto;
  position: relative;
  z-index: 1;
}

main > section > .kicker { margin-bottom: 0.75rem; }
main > section > h2 { margin-bottom: 2rem; }

/* Hero-kickern ligger inuti .hero-innehall och traffas darfor inte av
   direktbarn-regeln ovan. Utan den har raden star den flush mot <h1>. */
#hero .kicker { margin-bottom: 0.75rem; }

/* ---- Hero ---- */
#hero {
  max-width: none;
  min-height: 100svh;
  padding: 0;
  display: grid;
  place-items: center;
  isolation: isolate;
  overflow: hidden;
}
#hero .hero-bild {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 60%;
  z-index: -2;
}
/* Tva lager. Den radiella skarmen sitter dar texten star och garanterar
   kontrasten; den linjara mornar mot nasta sektion. En jamn mork tona over
   hela bilden hade dodat himlen och roden, som ar det basta i fotot. */
#hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(ellipse 46rem 26rem at 50% 46%,
      rgba(11, 26, 31, 0.78) 0%,
      rgba(11, 26, 31, 0.55) 45%,
      rgba(11, 26, 31, 0) 78%),
    linear-gradient(to bottom,
      rgba(11, 26, 31, 0.50) 0%,
      rgba(11, 26, 31, 0.28) 30%,
      rgba(11, 26, 31, 0.55) 70%,
      rgba(11, 26, 31, 0.92) 100%);
}
.hero-innehall {
  text-align: center;
  padding: var(--matt);
  color: var(--sand);
}
.hero-tagline {
  margin: 1.25rem auto 0;
  font-size: var(--step-1);
  max-width: 34ch;
}
.hero-klocka {
  position: absolute;
  bottom: var(--matt);
  left: var(--matt);
  font-size: var(--step--1);
  color: var(--sand);
  opacity: 0.6;
  letter-spacing: 0.2em;
}

/* ---- Tvakolumnare ---- */
.nicklas-rutnat,
.baten-rutnat {
  display: grid;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
@media (min-width: 48rem) {
  .nicklas-rutnat,
  .baten-rutnat { grid-template-columns: 1fr 1fr; }
  .baten-rutnat img { border-radius: 3px; }
}

/* ---- Galleri ---- */
.galleri-rutnat {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 0.75rem;
}
.galleri-rutnat img,
.galleri-lucka {
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 3px;
}

/* ---- Fot ---- */
/* opacity 0.7, inte 0.6: 0.6 ger 4.1:1 mot sand i ljust lage och underkands.
   0.7 ger 5.6:1. Samma skal galler .utrustning .post och .boka-fakta dt. */
footer {
  padding: var(--sektion) var(--matt);
  text-align: center;
  font-size: var(--step--1);
  opacity: 0.7;
}