/*
  STILARKET FOR ALLE SIDENE

  CSS bestemmer hvordan HTML-en ser ut. Hver regel har en velger og noen egenskaper:

    .btn { padding: 15px 32px; }
    ^^^^   ^^^^^^^^^^^^^^^^^^^
    velger  egenskap: verdi;

  Velgere:
  - .navn      elementer med class="navn"
  - h2         alle <h2>-elementer
  - .a .b      .b som ligger inni .a
  - .a > .b    .b som ligger rett inni .a
  - :hover     når musepekeren er over elementet
  - ::before   en ekstra, usynlig del som legges til foran innholdet, og brukes til pynt

  Når flere regler gjelder samme element, vinner den mest presise. Er de like presise, vinner den som står sist.
  !important tvinger en regel til å vinne, og brukes bare der det trengs.

  Enheter: px er piksler. rem er ganger skriftstørrelsen på siden (1rem er vanligvis 16px). em er ganger
  skriftstørrelsen til elementet selv. vw og vh er prosent av bredden og høyden til vinduet.
  clamp(minst, ønsket, mest) gir en verdi som vokser med vinduet, men holder seg mellom minst og mest.
*/

/* Fargene og andre verdier som brukes mange steder. var(--pink) henter verdien. Endres en farge her, endres den overalt */
:root {
  --bg: #0e0718;          /* Bakgrunnen, nesten svart lilla */
  --bg-2: #1a0b2e;        /* Litt lysere lilla, øverst på siden */
  --ink: #fdf2fb;         /* Teksten, nesten hvit */
  --muted: #d6bfe0;       /* Dempet tekst */
  --pink: #ff6ec7;
  --rose: #ffb3de;
  --lilac: #b98bff;
  --cyan: #7ef0ff;
  --gold: #ffd9a8;
  /* rgba(rød, grønn, blå, gjennomsiktighet): 0.06 betyr nesten helt gjennomsiktig */
  --glass: rgba(255, 255, 255, 0.06);
  --glass-border: rgba(255, 190, 235, 0.25);
  /* Den holografiske fargeovergangen på knappene og kantene */
  --holo: linear-gradient(120deg, #ffb3de 0%, #b98bff 30%, #7ef0ff 55%, #ffd9a8 80%, #ff6ec7 100%);
  --radius: 28px;         /* Hvor runde hjørnene på kortene er */
}

/* * betyr alle elementer. border-box gjør at kanter og luft inni regnes med i bredden, så det er lettere å regne */
* { box-sizing: border-box; }

/* hidden skal alltid vinne over display-regler lenger ned */
[hidden] { display: none !important; }

/* Lenker til #om og lignende glir ned til stedet i stedet for å hoppe */
html { scroll-behavior: smooth; }

body {
  margin: 0;
  /* Fonten. Finnes ikke Space Grotesk, brukes systemets font i stedet */
  font-family: 'Space Grotesk', system-ui, sans-serif;
  color: var(--ink);
  /* En fargeovergang som er lysest øverst i midten */
  background: radial-gradient(ellipse at top, var(--bg-2), var(--bg) 60%);
  background-color: var(--bg);
  min-height: 100vh;
  overflow-x: hidden;     /* Ingen vannrett rullefelt hvis noe stikker utenfor */
  line-height: 1.6;       /* Avstanden mellom linjene, 1,6 ganger skriftstørrelsen */
}

/* Lenker får samme farge som teksten rundt, i stedet for nettleserens blå */
a { color: inherit; }

/* ---------- Bakgrunn ---------- */
/* Ligger fast bak alt (z-index: -1), fyller hele vinduet (inset: 0), og tar ikke imot klikk (pointer-events: none) */
.bg { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }

/* De glødende kulene: runde (border-radius: 50%), svært uskarpe (blur) og halvt gjennomsiktige */
.orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  opacity: 0.55;
  /* Bruker animasjonen float under: 18 sekunder, myk fart, i det uendelige */
  animation: float 18s ease-in-out infinite;
}
/* Hver kule får sin størrelse, farge og plass. animation-delay gjør at de ikke beveger seg i takt */
.orb-1 { width: 520px; height: 520px; background: var(--pink); top: -140px; left: -120px; }
.orb-2 { width: 460px; height: 460px; background: var(--lilac); top: 30%; right: -160px; animation-delay: -6s; }
.orb-3 { width: 380px; height: 380px; background: var(--cyan); bottom: -120px; left: 30%; opacity: 0.3; animation-delay: -12s; }

/* En animasjon: hvor kula er og hvor stor den er ved start (0 %), en tredjedel (33 %), to tredjedeler (66 %) og slutt (100 %) */
@keyframes float {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(60px, 40px) scale(1.08); }
  66% { transform: translate(-40px, 70px) scale(0.95); }
}

/* Rutenettet: to fargeoverganger som tegner tynne streker hver 60. piksel, bortover og nedover.
   mask-image gjør at rutenettet blekner bort mot kantene */
.grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 179, 222, 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 179, 222, 0.07) 1px, transparent 1px);
  background-size: 60px 60px;
  mask-image: radial-gradient(ellipse at center, black 20%, transparent 75%);
  /* -webkit- er samme regel for eldre Safari */
  -webkit-mask-image: radial-gradient(ellipse at center, black 20%, transparent 75%);
}

/* Flaten der script.js tegner nettverket */
.neural { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0.7; }

/* ---------- Navigasjon ---------- */
.nav {
  /* sticky: menyen blir liggende øverst når du blar. z-index: 10 legger den over innholdet */
  position: sticky;
  top: 0;
  z-index: 10;
  /* flex legger logoen og lenkene på én rad, med logoen til venstre og lenkene til høyre (space-between) */
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18px clamp(16px, 5vw, 64px);
  /* Gjør det som ligger bak menyen uskarpt, som frostet glass */
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  background: rgba(14, 7, 24, 0.45);
  border-bottom: 1px solid rgba(255, 190, 235, 0.12);
}
.logo { display: block; line-height: 0; }
.logo img { height: 44px; width: auto; }
.nav nav { display: flex; gap: clamp(12px, 3vw, 32px); align-items: center; }
/* transition: fargen endres mykt over 0,2 sekunder i stedet for med en gang */
.nav nav a { text-decoration: none; font-size: 0.9rem; color: var(--muted); transition: color 0.2s; }
.nav nav a:hover { color: var(--ink); }
/* «Bli med»-lenken får en rosa ramme rundt seg. border-radius: 999px gir helt runde ender */
.nav-cta {
  padding: 8px 18px;
  border-radius: 999px;
  border: 1px solid var(--pink);
  color: var(--ink) !important;
}

/* ---------- Hero ---------- */
/* Luft på sidene av alt innholdet, som vokser med vinduet */
main { padding: 0 clamp(16px, 5vw, 64px); }

/* Toppen av forsiden: nesten hele vinduets høyde (88vh), med innholdet midt på */
.hero {
  min-height: 88vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 60px 0 40px;
  position: relative;     /* Så båndet (.ribbon) kan plasseres nederst i denne */
}

/* Den lille teksten med store, spredte bokstaver over overskriftene */
.eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.35em;
  font-size: 0.75rem;
  color: var(--rose);
  margin: 0 0 12px;
}

/* Full bredde, så 100 % under regnes likt i alle nettlesere og ikke ut fra bildet selv */
h1 { margin: 0; width: 100%; }
h1 img {
  display: block;
  margin-inline: auto;    /* Midtstilt */
  width: min(100%, 900px); /* Så bredt som det er plass til, men maks 900px */
  height: auto;
  filter: drop-shadow(0 0 30px rgba(203, 176, 255, 0.35));
}

/* Får fargeovergangen på knappene til å gli fram og tilbake */
@keyframes holo {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

/* flex-wrap: knappene legger seg under hverandre hvis det ikke er plass ved siden av hverandre */
.hero-actions { display: flex; gap: 16px; flex-wrap: wrap; justify-content: center; margin-top: clamp(32px, 6vw, 56px); }

/* ---------- Knapper ---------- */
/* Felles for alle knapper og lenker med class="btn" */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 15px 32px;
  border-radius: 999px;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;        /* Musepekeren blir en hånd */
  border: none;
  transition: transform 0.25s, box-shadow 0.25s;
}
/* Pilen eller stjernen i knappen flytter seg og vipper litt når musepekeren er over */
.btn span { transition: transform 0.25s; }
.btn:hover span { transform: translateX(4px) rotate(15deg); }
/* Hovedknappen: holografisk bakgrunn som glir, og en rosa glød under */
.btn-primary {
  color: #2a0b30;
  background: var(--holo);
  background-size: 200% 200%;
  animation: holo 6s ease infinite;
  box-shadow: 0 10px 40px -10px rgba(255, 110, 199, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
/* Løfter seg litt (translateY(-2px)) når musepekeren er over */
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 16px 50px -10px rgba(255, 110, 199, 0.9); }
/* Den andre knappen: bare en tynn ramme */
.btn-ghost {
  color: var(--ink);
  background: transparent;
  border: 1px solid var(--glass-border);
}
.btn-ghost:hover { background: var(--glass); }
/* Knappen i skjemaene går over hele bredden */
.btn-wide { width: 100%; margin-top: 8px; }
/* Mens skjemaet sendes, er knappen slått av. Da blir den blekere, og pekeren viser at noe skjer */
.btn:disabled { opacity: 0.6; cursor: wait; }

/* ---------- Bånd ---------- */
/* Båndet nederst i toppen av forsiden. Det plasseres helt nederst (bottom: 0) og strekkes ut over luften på sidene,
   så det går fra kant til kant. calc(-1 * …) er minus luften som main har på sidene */
.ribbon {
  position: absolute;
  bottom: 0;
  left: calc(-1 * clamp(16px, 5vw, 64px));
  right: calc(-1 * clamp(16px, 5vw, 64px));
  overflow: hidden;       /* Tekst utenfor båndet skjules */
  white-space: nowrap;    /* Teksten brytes aldri til en ny linje */
  padding: 12px 0;
  border-top: 1px solid var(--glass-border);
  border-bottom: 1px solid var(--glass-border);
  background: rgba(255, 110, 199, 0.06);
  font-size: 0.8rem;
  letter-spacing: 0.3em;
  color: var(--rose);
}
/* Sporet har like kopier av teksten og flyttes en halv lengde. script.js legger til kopier, så halvparten alltid fyller båndet */
.ribbon-spor { display: flex; width: max-content; animation: marquee 40s linear infinite; }
.ribbon-spor span { padding-right: 0.55em; }
/* Flytter sporet halve sin egen bredde til venstre. linear over: jevn fart hele veien */
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---------- Glass-kort ---------- */
/* Kortene med glassutseende: nesten gjennomsiktige, med uskarp bakgrunn, runde hjørner og skygge */
.glass {
  background: var(--glass);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 20px 60px -20px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.1);
  position: relative;
}
/* Holografisk kantlinje */
/* Slik virker det: ::before legger et lag med fargeovergangen rett over kortet. Masken skjærer bort
   alt unntatt en kant som er 1 piksel bred (padding: 1px), så bare kanten blir farget */
.glass::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: var(--holo);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0.5;
  pointer-events: none;
}

/* Overskriftene. clamp gjør dem mindre på mobil og større på PC */
h2 {
  font-family: 'Italiana', serif;
  font-weight: 400;
  font-size: clamp(2rem, 5vw, 3.2rem);
  margin: 0 0 16px;
  line-height: 1.1;
}
/* Det uthevede ordet i overskriftene (<em>) og alle mindre overskrifter (<h3>) står i Playfair Display kursiv */
h2 em, h3 {
  font-family: 'Playfair Display', serif;
  font-style: italic;
}
h2 em { color: var(--rose); }

/* Tekstkortene (Formål, Om oss og andre): maks 860px brede, midtstilt (margin: … auto) */
.about { max-width: 860px; margin: 100px auto; }
.about-card { padding: clamp(28px, 5vw, 56px); text-align: center; }
.about-card p { color: var(--muted); font-size: 1.1rem; margin: 0; }
/* p + p: et avsnitt som kommer rett etter et annet avsnitt, får luft over seg */
.about-card p + p, .form-head .muted + .muted { margin-top: 1em; }

/* Verdikortene: et rutenett (grid) der hvert kort er minst 250px bredt. auto-fit legger inn så mange
   kolonner det er plass til, så det blir fire på PC, to på nettbrett og én på mobil */
.values {
  max-width: 1100px;
  margin: 0 auto 120px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 24px;
}
.value { padding: 36px 30px; transition: transform 0.3s; }
/* Kortet løfter seg og vipper litt når musepekeren er over */
.value:hover { transform: translateY(-6px) rotate(-0.5deg); }
/* Den runde, glødende sirkelen med et symbol i. place-items: center legger symbolet midt i */
.value-icon {
  font-size: 2rem;
  width: 64px;
  height: 64px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.4), rgba(255, 110, 199, 0.25));
  border: 1px solid var(--glass-border);
  margin-bottom: 18px;
  color: var(--ink);
  box-shadow: 0 0 30px rgba(255, 110, 199, 0.35);
}
.value h3 { font-size: 1.6rem; font-weight: 400; margin: 0 0 8px; }
.value p { margin: 0; color: var(--muted); }

/* ---------- Skjema ---------- */
.join { max-width: 820px; margin: 0 auto 120px; }
.form-card { padding: clamp(24px, 5vw, 56px); }
.form-head { text-align: center; margin-bottom: 36px; }
.muted { color: var(--muted); margin: 0; }

/* Feltene i skjemaet står under hverandre, med 20px mellom */
form { display: flex; flex-direction: column; gap: 20px; }
/* To felter ved siden av hverandre, eller under hverandre når det ikke er plass til 240px hver */
.row { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; }

/* Ett felt: teksten over, feltet under. min-width: 0 hindrer at lange ord gjør feltet for bredt */
.field { display: flex; flex-direction: column; gap: 8px; border: none; padding: 0; margin: 0; min-width: 0; }
/* Teksten over feltet («FULLT NAVN *») */
.field > span {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--rose);
}

/* Selve feltene der man skriver. [type='text'] velger bare <input type="text"> */
input[type='text'], input[type='email'], input[type='url'], input[type='password'], select, textarea {
  width: 100%;
  font-family: inherit;   /* Samme font som resten av siden. Nettlesere bruker ellers en egen font i felter */
  font-size: 1rem;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 190, 235, 0.2);
  border-radius: 16px;
  padding: 14px 18px;
  outline: none;          /* Fjerner nettleserens egen ramme. Den rosa rammen under :focus brukes i stedet */
  transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
}
/* Tekstfeltet med flere linjer kan bare gjøres høyere, ikke bredere */
textarea { resize: vertical; }
/* Nedtrekkslisten: appearance: none fjerner nettleserens egen pil. Den nye pilen tegnes av to fargeoverganger
   som til sammen blir en liten trekant til høyre */
select { appearance: none; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--rose) 50%), linear-gradient(135deg, var(--rose) 50%, transparent 50%);
  background-position: calc(100% - 22px) 50%, calc(100% - 16px) 50%;
  background-size: 6px 6px;
  background-repeat: no-repeat;
}
select option { background: var(--bg-2); color: var(--ink); }
/* Den grå eksempelteksten i feltene */
::placeholder { color: rgba(214, 191, 224, 0.45); }
/* :focus er feltet du skriver i akkurat nå. Det får rosa ramme og glød */
input:focus, select:focus, textarea:focus {
  border-color: var(--pink);
  background: rgba(255, 110, 199, 0.07);
  box-shadow: 0 0 0 4px rgba(255, 110, 199, 0.15), 0 0 24px rgba(255, 110, 199, 0.25);
}
/* Felter som ikke er fylt ut riktig. script.js legger klassen invalid på dem */
.invalid { border-color: #ff7a9c !important; box-shadow: 0 0 0 4px rgba(255, 122, 156, 0.15) !important; }

/* Avkrysningsboksene for samtykke og nyhetsbrev, med boksen til venstre og teksten til høyre */
.consent { display: flex; gap: 12px; align-items: flex-start; font-size: 0.9rem; color: var(--muted); cursor: pointer; }
/* accent-color: gir avkrysningsboksen rosa farge når den er krysset av */
.consent input { accent-color: var(--pink); width: 18px; height: 18px; margin-top: 3px; flex-shrink: 0; }

/* Feilmeldingen under skjemaet */
.form-error { color: #ff9bb5; margin: 0; font-size: 0.9rem; }

/* Takkemeldingen. Den spretter fram med animasjonen pop under. cubic-bezier styrer farten, så den skyter litt over før den lander */
.success { text-align: center; padding: 40px 0 10px; animation: pop 0.6s cubic-bezier(.2, 1.4, .4, 1); }
.success-icon {
  font-size: 3rem;
  width: 96px; height: 96px;
  margin: 0 auto 20px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--holo);
  color: #2a0b30;
  box-shadow: 0 0 60px rgba(255, 110, 199, 0.6);
}
.success h3 { font-size: 2.2rem; font-weight: 400; margin: 0 0 8px; }
.success p { color: var(--muted); margin: 0; }
/* Starter litt mindre og gjennomsiktig, og ender i full størrelse */
@keyframes pop { from { transform: scale(0.8); opacity: 0; } to { transform: scale(1); opacity: 1; } }

footer {
  text-align: center;
  padding: 40px 16px;
  color: var(--muted);
  font-size: 0.85rem;
  border-top: 1px solid rgba(255, 190, 235, 0.12);
}

/* @media: regler som bare gjelder i visse tilfeller. Her: når vinduet er 600px eller smalere (mobil).
   Da skjules alle lenkene i menyen unntatt «Bli med» og «Arrangementer» */
@media (max-width: 600px) {
  .nav nav a:not(.nav-cta):not(.nav-events) { display: none; }
}

/* Har brukeren bedt om mindre bevegelse i innstillingene på maskinen sin, slås alle animasjoner av */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ---------- Personvern ---------- */
/* Personvernerklæringen er venstrejustert, siden lang tekst er lettere å lese da */
.privacy { text-align: left; }
.privacy h3 { margin: 1.8em 0 0.4em; }
.privacy p { margin: 0 0 1em; }
.privacy strong { color: var(--ink); font-weight: 500; }
/* Lenker i løpende tekst blir understreket, så de er lette å se */
.privacy a, .consent a, footer a { text-decoration: underline; }

/* ---------- Arrangementer ---------- */
/* Lenken til siden du er på (aria-current="page" i HTML-en) får sterkere farge */
.nav nav a[aria-current='page'] { color: var(--ink); }
.events { max-width: 860px; margin: 0 auto 120px; display: flex; flex-direction: column; gap: 24px; }
/* Ett arrangement: datoen til venstre, teksten til høyre */
.event { display: flex; gap: clamp(18px, 4vw, 36px); align-items: flex-start; padding: clamp(24px, 4vw, 40px); }
/* Den holografiske firkanten med datoen. flex-shrink: 0 hindrer at den blir klemt sammen */
.event-date {
  flex-shrink: 0;
  width: 84px;
  height: 84px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 22px;
  background: var(--holo);
  background-size: 200% 200%;
  animation: holo 6s ease infinite;
  color: #2a0b30;
  box-shadow: 0 0 30px rgba(255, 110, 199, 0.4);
  line-height: 1;
}
.event-day { font-family: 'Italiana', serif; font-size: 2.2rem; }
.event-month { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.2em; margin-top: 4px; }
.event-body { min-width: 0; }
.event-body .eyebrow { margin-bottom: 6px; }
.event h3 { font-size: 1.8rem; font-weight: 400; margin: 0 0 6px; line-height: 1.2; }
/* Tid og sted */
.event-meta { color: var(--rose); font-size: 0.95rem; margin: 0 0 14px; }
/* :not(…) betyr «unntatt». Her: alle avsnitt unntatt den lille teksten og tid og sted */
.event-body p:not(.eyebrow):not(.event-meta) { color: var(--muted); margin: 0 0 0.8em; }
/* Det siste avsnittet trenger ikke luft under seg */
.event-body p:last-child { margin-bottom: 0; }

/* På mobil står datoen over teksten i stedet for ved siden av */
@media (max-width: 600px) {
  .event { flex-direction: column; }
}

/* ---------- Nyhetsbrev ---------- */
/* Teksten under takkemeldingen for søknaden som sier om påmeldingen til nyhetsbrevet gikk bra */
.success .success-merknad { margin-top: 1em; color: var(--gold); }

/* ---------- To måter å være med på ---------- */
/* To kolonner like brede (repeat(2, 1fr): to deler av den ledige plassen hver) */
.veier {
  max-width: 960px;
  margin: 100px auto;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}
/* På skjermer som er 760px eller smalere, blir det én kolonne */
@media (max-width: 760px) {
  .veier { grid-template-columns: 1fr; }
}
/* Overskriften strekker seg over begge kolonnene (fra første til siste linje i rutenettet) */
.veier-head { grid-column: 1 / -1; text-align: center; margin-bottom: 12px; }
.vei { display: flex; flex-direction: column; padding: clamp(28px, 4vw, 44px); }
.vei .eyebrow { margin-bottom: 6px; }
.vei h3 { font-size: 1.9rem; font-weight: 400; margin: 0 0 12px; line-height: 1.2; }
.vei p:not(.eyebrow) { color: var(--muted); margin: 0 0 18px; }
/* Punktlisten uten vanlige punkter. I stedet legges en rosa stjerne foran hvert punkt med ::before */
.vei ul { list-style: none; padding: 0; margin: 0 0 28px; display: grid; gap: 8px; }
.vei li { padding-left: 1.6em; position: relative; }
.vei li::before { content: '✦'; position: absolute; left: 0; color: var(--rose); }
/* margin-top: auto skyver knappene helt ned i kortet, så knappene i de to kortene står på linje */
.vei > .btn, .vei-knapper { margin-top: auto; }
.vei > .btn { align-self: flex-start; }
.vei-knapper { display: flex; gap: 12px; flex-wrap: wrap; }