/*
  stil.css – utseendet på nettsiden (retning C: «Menneskelig og redaksjonell»).
  Farger fra LiveTrace-logoen. Alle avstander følger et 8 px-rutenett (--a1 = 8 px).
  Skrift: Manrope, lagret lokalt i skrift/ (lisens: skrift/OFL.txt).
*/

@font-face {
  font-family: "Manrope";
  src: url("skrift/manrope.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Farger */
  --marine: #1e3a5f;        /* logoens blåfarge: overskrifter, lenker, knapper – eneste aksent */
  --marine-mork: #142a45;   /* hover */
  --tekst: #1f2933;
  --dempet: #4a5866;
  --bakgrunn: #ffffff;
  --flate: #f5f7fa;         /* vekslende seksjoner */
  --linje: #e2e8f0;
  --hvit: #ffffff;

  /* Former og bevegelse */
  --radius-stor: 1rem;      /* 16 px: bilder og kort */
  --skygge: 0 1px 2px rgba(20, 36, 58, 0.06), 0 12px 32px -8px rgba(20, 36, 58, 0.12);
  --overgang: 180ms ease-out;

  /* Avstander (8 px-rutenett) */
  --a1: 0.5rem;   /*  8 px */
  --a2: 1rem;     /* 16 px */
  --a3: 1.5rem;   /* 24 px */
  --a4: 2rem;     /* 32 px */
  --a6: 3rem;     /* 48 px */
  --a8: 4rem;     /* 64 px */
  --a12: 6rem;    /* 96 px */

  --maks: 72rem;        /* bredeste innhold: 1152 px */
  --prosa: 65ch;        /* behagelig linjelengde for brødtekst */
  --trykkflate: 2.75rem; /* 44 px: minste størrelse på knapper og lenker */
  --radius: 0.5rem;
}

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

[hidden] { display: none !important; }

/* Skjult et øyeblikk mens innhold og skrift settes inn (se toppen av index.html og slutten av side.js). */
.laster body { visibility: hidden; }

html { -webkit-text-size-adjust: 100%; }
/* Rolig scrolling til ankerlenker, bare for dem som ikke har bedt om redusert bevegelse. */
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

body {
  margin: 0;
  font-family: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 1.125rem;      /* 18 px */
  line-height: 1.75rem;     /* 28 px */
  color: var(--tekst);
  background: var(--bakgrunn);
  overflow-wrap: break-word;
}

img { max-width: 100%; height: auto; display: block; }

/* Ingen bevegelse for dem som har bedt om det i innstillingene sine. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* ---------- Typografi ---------- */

h1, h2, h3 { text-wrap: balance; }
h1, h2 { color: var(--marine); font-weight: 700; letter-spacing: -0.02em; margin: 0; }
h1 { font-size: 2.5rem; line-height: 3rem; }                /* 40/48 */
h2 { font-size: 1.75rem; line-height: 2.25rem; margin-bottom: var(--a3); }  /* 28/36 */

@media (min-width: 48rem) {
  h1 { font-size: 3.5rem; line-height: 4rem; }              /* 56/64 */
  h2 { font-size: 2.25rem; line-height: 2.75rem; margin-bottom: var(--a4); }  /* 36/44 */
}

p { margin: 0 0 var(--a2); }
p:last-child { margin-bottom: 0; }

.prosa { max-width: var(--prosa); }
.ingress { text-wrap: pretty; color: var(--dempet); max-width: var(--prosa); margin: calc(-1 * var(--a1)) 0 var(--a4); }

/* ---------- Lenker, knapper og fokus ---------- */

a { color: var(--marine); text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
a:hover { color: var(--marine-mork); text-decoration-thickness: 2px; }

:focus-visible { outline: 3px solid var(--marine); outline-offset: 3px; border-radius: 2px; }
#innhold:focus { outline: none; }

/* Frittstående lenker får en trykkflate på minst 44 px i høyden. */
.tekstlenke { display: inline-flex; align-items: center; min-height: var(--trykkflate); min-width: var(--trykkflate); }

.knapperad { display: flex; flex-wrap: wrap; gap: var(--a2); margin-top: var(--a4); }

.knapp {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: var(--a6); padding: 0 var(--a4);
  font: inherit; font-size: 1rem; font-weight: 700; line-height: 1.5rem; text-decoration: none;
  color: var(--hvit); background: var(--marine);
  border: 2px solid var(--marine); border-radius: 999px; cursor: pointer;
  transition: background-color var(--overgang), border-color var(--overgang), color var(--overgang);
}
.knapp:hover { color: var(--hvit); background: var(--marine-mork); border-color: var(--marine-mork); }
.knapp-sekundaer { color: var(--marine); background: transparent; }
.knapp-sekundaer:hover { color: var(--hvit); }

.ramme { width: 100%; max-width: var(--maks); margin: 0 auto; padding: 0 var(--a2); }
@media (min-width: 48rem) { .ramme { padding: 0 var(--a4); } }

.skjult {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.hopp-til {
  position: absolute; left: var(--a2); top: calc(-1 * var(--a8)); z-index: 10;
  display: inline-flex; align-items: center; min-height: var(--trykkflate); padding: 0 var(--a2);
  background: var(--marine); color: var(--hvit); border-radius: var(--radius);
}
.hopp-til:focus { top: var(--a2); color: var(--hvit); outline-color: var(--hvit); outline-offset: -5px; }

/* ---------- Varsler (feil i innhold.js og merknader til redaktør) ---------- */

.varsler:has(> :not([hidden]):not(noscript)) { padding-top: var(--a2); padding-bottom: var(--a2); }

.feilmelding {
  margin: 0; padding: var(--a3); border: 2px solid #b42318; border-radius: var(--radius);
  background: #fef3f2; color: #4a1510; max-width: var(--prosa);
}
.feilmelding-tittel { font-weight: 700; color: #912018; }

.merknader {
  margin: var(--a2) 0 0; padding: var(--a1) var(--a2); border: 1px dashed #8a6100; border-radius: var(--radius);
  background: #fffaeb; color: #4e3800; font-size: 0.875rem; line-height: 1.25rem;
}
.merknader:first-child { margin-top: 0; }
.merknader summary { cursor: pointer; font-weight: 600; min-height: var(--trykkflate); display: flex; align-items: center; }
.merknader ul { margin: var(--a1) 0; padding-left: var(--a3); }
.merknader .merknad { font-weight: 600; }

/* ---------- Topplinje og meny ---------- */

.sideramme { position: relative; }

/* Menyen følger med når man scroller. */
.topplinje { position: sticky; top: 0; z-index: 5; background: var(--bakgrunn); border-bottom: 1px solid var(--linje); }
.topplinje-indre {
  display: flex; align-items: center; justify-content: space-between; gap: var(--a2);
  padding-top: var(--a2); padding-bottom: var(--a2);
}
.logo { display: block; flex-shrink: 0; }
.logo img { height: var(--a6); width: auto; }

/* Negativ marg: teksten i siste menypunkt flukter med høyrekanten av innholdet. */
#hovedmeny { margin-right: calc(-1 * var(--a2)); }
.meny { display: flex; list-style: none; margin: 0; padding: 0; }
.meny a {
  display: inline-flex; align-items: center; min-height: var(--trykkflate); padding: 0 var(--a2);
  font-size: 1rem; font-weight: 600; text-decoration: none; color: var(--dempet);
  transition: color var(--overgang);
}
.meny a:hover { color: var(--marine); }
.meny a[aria-current="page"] { color: var(--marine); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.5em; }

/* ---------- Toppen av forsiden ---------- */

/* Stort hovedbudskap og knapper øverst, deretter gruppebildet stort.
   Ingen tekst oppå bildet, så ansiktene alltid er synlige og teksten alltid lesbar. */
/* Lys grå bakgrunn, så gruppebildet (hvit bakgrunn) står frem som et eget kort. */
.topp { padding: var(--a6) 0 var(--a8); background: var(--flate); }
.topp-ramme { display: grid; gap: var(--a3); }
.topp h1 {
  font-size: 2.5rem; line-height: 2.75rem;      /* 40/44 */
  font-weight: 700; letter-spacing: -0.025em; max-width: 16ch;
}
.topp .knapperad { margin-top: 0; }
.topp-overskrift .etikett { margin-bottom: var(--a2); }
.topp-figur { margin: var(--a6) auto 0; }
.topp-bilde {
  width: 100%; height: auto; aspect-ratio: auto 3 / 2;   /* plass er reservert før bildet er lastet, så siden ikke hopper */
  border-radius: var(--radius-stor); box-shadow: var(--skygge);
  max-height: 40rem; object-fit: cover; object-position: 50% 0;   /* beskjæres nedenfra, aldri hoder */
}
.bildetekst { margin-top: var(--a2); font-size: 0.875rem; line-height: 1.25rem; color: var(--dempet); max-width: var(--prosa); }

/* Mobil: bildet går helt ut til kantene, så ansiktene blir så store som mulig. */
@media (max-width: 47.99rem) {
  .topp-figur { padding: 0; }
  .topp-bilde { border-radius: 0; box-shadow: none; }
  .bildetekst { padding: 0 var(--a2); }
}
@media (min-width: 48rem) {
  .topp { padding: var(--a12) 0 var(--a12); }
  .topp h1 { font-size: 3.5rem; line-height: 3.75rem; }        /* 56/60 */
  .topp-figur { margin-top: var(--a8); }
}
/* PC: overskriften til venstre og knappene nede til høyre på samme linje. */
@media (min-width: 64rem) {
  .topp-ramme { grid-template-columns: 1fr auto; align-items: end; column-gap: var(--a8); }
}
@media (min-width: 72rem) {
  .topp h1 { font-size: 4.5rem; line-height: 4.75rem; }        /* 72/76 */
}

/* ---------- Felles byggesteiner ---------- */

h3 { color: var(--marine); font-size: 1.25rem; line-height: 1.75rem; font-weight: 700; letter-spacing: -0.01em; margin: 0; }

/* Små etiketter over innhold, f.eks. «I samarbeid med». */
.etikett {
  font-size: 0.875rem; line-height: 1.25rem; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--dempet); margin: 0;
}

.seksjon { padding: var(--a8) 0; }
@media (min-width: 48rem) { .seksjon { padding: var(--a12) 0; } }
.seksjon-flate { background: var(--flate); }

/* Kort: hvit flate, avrundede hjørner og myk skygge. Samme utseende overalt. */
.post-kort, .person {
  background: var(--bakgrunn); border-radius: var(--radius-stor); box-shadow: var(--skygge);
}

/* Rolig inntoning første gang en seksjon kommer til syne (styres av side.js). */
.animer .inn { opacity: 0; transform: translateY(1rem); transition: opacity 600ms ease-out, transform 600ms ease-out; }
.animer .inn.synlig { opacity: 1; transform: none; }

/* Ikoner (strektegnet, arver tekstfargen). */
.ikon { width: 1.5rem; height: 1.5rem; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.knapp .ikon { width: 1.25rem; height: 1.25rem; margin-right: var(--a1); }

/* ---------- Samarbeidspartnere: logostripe rett under toppen ---------- */
/* Kjente navn tidlig gir tillit før man leser videre. Rolig og liten, så teamet fortsatt er hovedsaken. */

.partnerstripe { padding: var(--a4) 0; border-bottom: 1px solid var(--linje); }
.partnerstripe-indre { display: grid; gap: var(--a2); justify-items: start; }
@media (min-width: 48rem) { .partnerstripe { padding: var(--a6) 0; } }
@media (min-width: 64rem) {
  .partnerstripe-indre { grid-template-columns: auto 1fr; align-items: center; column-gap: var(--a6); }
}
.partner-liste {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--a2) var(--a4);
}
@media (min-width: 48rem) { .partner-liste { column-gap: var(--a6); } }
.partner-lenke { display: inline-flex; align-items: center; min-height: var(--trykkflate); }
/* Fast ramme for logoene: brede logoer begrenses av bredden, høye av høyden, så de veier omtrent likt. */
.partner-logo { width: auto; height: auto; max-width: 11rem; max-height: 2.25rem; }
@media (min-width: 48rem) { .partner-logo { max-width: 15rem; max-height: 3rem; } }
.partner-navn { font-weight: 700; color: var(--marine); }

/* ---------- Aktuelt ---------- */

.poster-liste {
  list-style: none; padding: 0; margin: 0;
  display: grid; gap: var(--a3); grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr));
  align-items: start;
}
.post-kort { padding: var(--a4); }
.post-overskrift { font-weight: 700; color: var(--marine); }
.post-personvern { font-size: 0.875rem; line-height: 1.25rem; color: var(--dempet); }
.post-kort .knapperad { margin-top: var(--a3); }
.post-ramme {
  display: block; width: 100%; max-width: 504px; border: 0; border-radius: var(--radius-stor);
  box-shadow: var(--skygge); background: var(--bakgrunn);
}

/* ---------- Kontaktkortet: avslutningen på hver side ---------- */
/* Siste inntrykk skal være en vennlig, tydelig invitasjon. */

.kontakt-kort {
  background: var(--marine); color: var(--hvit);
  border-radius: 1.5rem; padding: var(--a6) var(--a3);
  display: grid; gap: var(--a3);
}
.kontakt-kort h2 { color: var(--hvit); margin: 0; }
.kontakt-ingress { color: #d6dee8; font-size: 1.125rem; max-width: 40ch; margin: 0; }
.kontakt-kort .knapperad { margin-top: var(--a1); flex-direction: column; align-items: stretch; }
.kontakt-kort :focus-visible { outline-color: var(--hvit); }
@media (min-width: 48rem) {
  .kontakt-kort { padding: var(--a8); }
  .kontakt-kort .knapperad { flex-direction: row; align-items: center; }
}
@media (min-width: 64rem) {
  .kontakt-kort { grid-template-columns: 1fr auto; column-gap: var(--a6); }
  .kontakt-kort .ansikter, .kontakt-kort h2, .kontakt-ingress { grid-column: 1; }
  /* Knappene midt på høyre side, ved siden av teksten. */
  .kontakt-kort .knapperad { grid-column: 2; grid-row: 1 / span 4; align-self: center; margin: 0; flex-direction: column; align-items: stretch; }
  .kontakt-direkte { grid-column: 1; }
}
.kontakt-direkte { margin: 0; text-wrap: balance; }
/* Besøksadressen under knappene, med kartnål. Lenken åpner kartet. */
.kontakt-adresse { align-self: center; text-wrap: balance; text-align: left; justify-content: center; gap: var(--a1); color: var(--hvit); font-weight: 600; text-decoration: none; }
.kontakt-adresse:hover { color: var(--hvit); }
.kontakt-adresse span { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
.kontakt-adresse .ikon { width: 1.25rem; height: 1.25rem; }
/* «Ta en prat» scroller hit: stopp litt under den faste menyen. */
#kontakt { scroll-margin-top: var(--a4); }
.kontakt-direkte a { color: var(--hvit); font-weight: 600; }
.kontakt-direkte a:hover { color: var(--hvit); }
.knapp-lys { background: var(--hvit); border-color: var(--hvit); color: var(--marine); }
.knapp-lys:hover { background: #e8eef6; border-color: #e8eef6; color: var(--marine-mork); }
.knapp-omriss-lys { background: transparent; border-color: rgba(255, 255, 255, 0.7); color: var(--hvit); }
.knapp-omriss-lys:hover { background: var(--hvit); border-color: var(--hvit); color: var(--marine); }

/* Ansiktene til teamet i kontaktkortet: man ser hvem man snakker med. */
.ansikter { display: flex; padding-left: var(--a1); }
.ansikter img {
  width: var(--a6); height: var(--a6); border-radius: 50%; object-fit: cover;
  background: var(--hvit); border: 3px solid var(--marine); margin-left: calc(-1 * var(--a1));
}

/* ---------- Teamsiden ---------- */

.sidetopp { background: var(--flate); padding-top: var(--a8); }
.sidetopp h1 { margin-bottom: var(--a3); }

.team-liste {
  list-style: none; padding: 0; margin: 0;
  display: grid; gap: var(--a3); grid-template-columns: 1fr;
}
@media (min-width: 40rem) { .team-liste { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 48rem) { .team-liste { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 72rem) { .team-liste { grid-template-columns: repeat(5, 1fr); } }

.person { position: relative; overflow: hidden; display: flex; flex-direction: column; transition: box-shadow var(--overgang); }
.person-bilde { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; background: #e8edf3; }
.person-tekst { padding: var(--a3); display: flex; flex-direction: column; flex: 1; }
.person-navn { font-size: 1.25rem; line-height: 1.75rem; margin: 0; }
.person-rolle { color: var(--dempet); font-weight: 600; font-size: 1rem; line-height: 1.5rem; margin: 0 0 var(--a2); }

/* På mobil: lite bilde til venstre og tekst til høyre, så kortene ikke blir for høye. */
@media (max-width: 39.99rem) {
  .person { flex-direction: row; align-items: flex-start; }
  .person-bilde { width: 6rem; flex-shrink: 0; margin: var(--a2) 0 var(--a2) var(--a2); border-radius: var(--radius); }
  .person-tekst { padding: var(--a2) var(--a3); min-width: 0; }
}

/* ---------- Bunn ---------- */

.bunn { background: var(--flate); padding: var(--a8) 0 var(--a4); font-size: 1rem; line-height: 1.5rem; color: var(--dempet); }
.bunn-kolonner { display: grid; gap: var(--a4) var(--a3); grid-template-columns: 1fr 1fr; }
.bunn-merke { grid-column: 1 / -1; }
@media (min-width: 48rem) { .bunn-kolonner { grid-template-columns: repeat(3, 1fr); column-gap: var(--a6); } .bunn-kolonne li { white-space: nowrap; } }
@media (min-width: 64rem) { .bunn-kolonner { grid-template-columns: 2fr 1fr 1fr 1fr; } .bunn-merke { grid-column: auto; } }
.bunn-merke img { height: 2.5rem; width: auto; }
.bunn-merke p { margin-top: var(--a2); font-weight: 600; color: var(--marine); max-width: 24ch; }
.bunn-tittel { font-size: 0.875rem; line-height: 1.25rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--dempet); margin: 0 0 var(--a1); }
.bunn-kolonne ul { list-style: none; margin: 0; padding: 0; }
.bunn-kolonne li { display: flex; align-items: center; color: var(--tekst); padding: var(--a1) 0; }
.bunn-kolonne li:has(> a) { padding: 0; }   /* lenker har egen trykkflate på 44 px */
.bunn-adresse span { display: block; }
.bunn-linje { margin: var(--a6) 0 0; padding-top: var(--a3); border-top: 1px solid var(--linje); font-size: 0.875rem; line-height: 1.25rem; }

/* ---------- Personkort: hele kortet er én knapp ---------- */
/* Kortet viser bare bilde, navn, rolle og kontaktikoner. Trykk åpner personen i et vindu. */

.person-knapp {
  font: inherit; color: inherit; text-align: left; background: none; border: 0; padding: 0; margin: 0;
  cursor: pointer;   /* hele kortet er trykkflaten (se ::after under), så navnet trenger ingen ekstra høyde */
}
/* Gjør hele kortet klikkbart, og vis fokusringen rundt hele kortet. */
.person-knapp::after { content: ""; position: absolute; inset: 0; border-radius: var(--radius-stor); }
.person-knapp:focus-visible { outline: none; }
.person-knapp:focus-visible::after { outline: 3px solid var(--marine); outline-offset: -3px; }
/* Dypere skygge og understreket navn ved hover: tegn på at kortet kan trykkes på.
   Ingen forflytning (transform), fordi det gjør teksten uskarp. Bare på enheter med mus,
   så effekten ikke blir «hengende» etter et trykk på mobil. */
@media (hover: hover) {
  .person:hover { box-shadow: 0 2px 4px rgba(20, 36, 58, 0.08), 0 20px 40px -12px rgba(20, 36, 58, 0.24); }
  .person:hover .person-knapp { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.2em; }
}

.person-ikoner { display: flex; gap: var(--a1); margin-top: auto; }
/* Kort norsk forklaring av rollen (på kortet og i vinduet). */
.person-forklaring { font-size: 0.875rem; line-height: 1.25rem; color: var(--dempet); margin: calc(-1 * var(--a1)) 0 var(--a2); }
.person-vindu .person-forklaring { margin-top: calc(-1 * var(--a1)); }
.ikon-boble {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.5rem; height: 2.5rem; border-radius: 50%; background: #e8eef6; color: var(--marine);
}
.ikon-boble .ikon { width: 1.125rem; height: 1.125rem; }

/* ---------- Vinduet med én person i fokus ---------- */

.person-vindu {
  border: 0; padding: 0; border-radius: 1.5rem; color: var(--tekst); background: var(--bakgrunn);
  width: min(42rem, calc(100% - 2rem)); max-height: calc(100% - 2rem); overflow: auto;
  box-shadow: 0 24px 64px -16px rgba(20, 36, 58, 0.35);
}
.person-vindu::backdrop { background: rgba(20, 36, 58, 0.6); }
/* Siden bak står stille mens vinduet er åpent. */
html:has(.person-vindu[open]) { overflow: hidden; }
.person-vindu[open] { animation: vindu-inn 200ms ease-out; }
@keyframes vindu-inn { from { opacity: 0; transform: translateY(0.5rem) scale(0.98); } }

.person-vindu-indre { position: relative; display: grid; gap: var(--a3); padding: var(--a4) var(--a3) var(--a3); }
.person-vindu-bilde { width: 7.5rem; height: 7.5rem; border-radius: var(--radius-stor); object-fit: cover; background: #e8edf3; }
.person-vindu-navn { font-size: 1.75rem; line-height: 2.25rem; margin: 0 var(--a6) 0 0; }
.person-vindu .person-rolle { margin-top: var(--a1); }
.person-vindu-etikett {
  font-size: 0.875rem; line-height: 1.25rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--dempet); margin: var(--a3) 0 var(--a1);
}
.person-vindu-detaljer p, #person-vindu-detaljer p { font-size: 1rem; line-height: 1.5rem; }

.person-vindu-kontakt { list-style: none; margin: var(--a3) 0 0; padding: 0; border-top: 1px solid var(--linje); }
.person-vindu-kontakt li { border-bottom: 1px solid var(--linje); }
.person-vindu-kontakt a { width: 100%; gap: var(--a2); font-weight: 600; text-decoration: none; overflow-wrap: anywhere; }
.person-vindu-kontakt a:hover span { text-decoration: underline; }
.person-vindu-kontakt .ikon { width: 1.25rem; height: 1.25rem; }

.lukk-knapp {
  position: absolute; top: var(--a2); right: var(--a2);
  width: var(--trykkflate); height: var(--trykkflate); border-radius: 50%; border: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: #e8eef6; color: var(--marine); cursor: pointer; transition: background-color var(--overgang);
}
.lukk-knapp:hover { background: #d6e0ee; }

@media (min-width: 40rem) {
  .person-vindu-indre { grid-template-columns: 12rem 1fr; gap: var(--a4); padding: var(--a6) var(--a4) var(--a4); }
  .person-vindu-bilde { width: 12rem; height: 12rem; }
}