/* Om os. Mobil foerst (Web_M_OmOs), desktop fra 900 px (Web_OmOs, 1920-px-laerred omsat til grid/flex). */

.side-om-os .aj-h3{text-transform:uppercase}
.side-om-os .aj-tag{text-transform:uppercase;color:var(--ink)}

/* ---------- Top: titel, maskot, historie ---------- */
.side-om-os .oo-top{display:grid;grid-template-columns:minmax(0,1fr)}
.side-om-os .oo-titel{display:flex;flex-direction:column;align-items:center}
.side-om-os .oo-titel .aj-title{font-size:clamp(64px,24vw,96px);margin-top:20px}
.side-om-os .oo-titel .aj-bar{width:210px;margin-top:-4px}
.side-om-os .oo-streg{display:none}
.side-om-os .oo-maskot{margin:10px 0 0;display:flex;justify-content:flex-start}
.side-om-os .oo-maskot img{display:block;width:100%;max-width:360px;margin-left:-14px}

.side-om-os .oo-kort{margin-top:14px;padding:20px 18px 18px}
.side-om-os .oo-h2{font-size:30px}
.side-om-os .oo-kort .aj-ul{margin:6px 0 12px}
.side-om-os .oo-ikon{float:left;width:96px;height:auto;margin:0 12px 6px 0;mix-blend-mode:multiply}
.side-om-os .oo-tekst .aj-p{line-height:1.45}
.side-om-os .oo-tekst .aj-p + .aj-p{margin-top:10px}
.side-om-os .oo-klar{font-weight:900}

/* ---------- Tre kort ---------- */
.side-om-os .oo-feat{margin-top:22px}
.side-om-os .oo-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:22px}
.side-om-os .oo-f{display:grid;grid-template-columns:108px minmax(0,1fr);column-gap:12px;align-items:start;padding:16px 16px 18px 10px}
.side-om-os .oo-num{position:absolute;left:-6px;top:-6px;width:38px;height:38px;border-radius:9px;background:var(--ink);color:var(--yel);
  display:flex;align-items:center;justify-content:center;font-family:var(--fd);font-size:26px;padding-top:3px;z-index:1}
.side-om-os .oo-fi{grid-column:1;grid-row:1;width:100%;height:auto;margin-top:18px;mix-blend-mode:multiply}
.side-om-os .oo-ft{grid-column:2;grid-row:1;min-width:0}
.side-om-os .oo-f .aj-h3{font-size:27px}
.side-om-os .oo-f .aj-ul{width:76px;margin:6px 0 8px}
.side-om-os .oo-tagrk{grid-column:1 / -1;grid-row:2;margin-top:14px;display:flex;align-items:center;gap:8px;padding-left:4px}
.side-om-os .oo-gul{background:var(--yel)}
.side-om-os .oo-blaa{background:#7FB8FF}
.side-om-os .oo-groen{background:#9BE04A}

/* ---------- Badge: BLIV JAGET. BLIV LEGENDE. ---------- */
.side-om-os .oo-badge{position:relative;width:250px;height:190px;margin:30px auto 0;display:flex;align-items:center;justify-content:center}
.side-om-os .oo-badge::before,.side-om-os .oo-badge::after{content:"";position:absolute;
  clip-path:polygon(97% 50%,86% 57%,98% 70%,81% 71%,86% 87%,71% 82%,68% 94%,57% 87%,50% 100%,43% 87%,31% 96%,29% 82%,14% 86%,18% 71%,2% 70%,13% 57%,3% 50%,13% 43%,7% 32%,18% 29%,13% 13%,29% 18%,31% 4%,43% 13%,50% 0%,57% 13%,68% 8%,71% 18%,85% 15%,82% 29%,98% 30%,86% 43%)}
.side-om-os .oo-badge::before{inset:0;background:#7FB8FF}
.side-om-os .oo-badge::after{left:8%;right:8%;top:12%;bottom:9%;background:var(--ink)}
.side-om-os .oo-badge p{position:relative;z-index:1;font-family:var(--fd);text-transform:uppercase;text-align:center;color:#fff;
  font-size:25px;line-height:1;letter-spacing:1px;transform:rotate(-8deg)}
.side-om-os .oo-badge p > span{display:block}
.side-om-os .oo-leg{color:var(--yel)}

/* ---------- Desktop ---------- */
@media (min-width:900px){
  .side-om-os .aj-main{padding-left:clamp(8px,2.9vw,56px);padding-right:clamp(8px,2.9vw,56px)}
  .side-om-os .oo-top{grid-template-columns:minmax(0,36fr) minmax(0,50fr);column-gap:clamp(12px,1.1vw,20px);padding-right:clamp(0px,5vw,110px)}
  .side-om-os .oo-titel{grid-column:1 / -1;grid-row:1;position:relative;z-index:1;display:grid;grid-template-columns:auto auto auto;align-items:center;justify-content:center;column-gap:clamp(4px,.6vw,12px)}
  .side-om-os .oo-titel .aj-title{font-size:clamp(84px,7.8vw,150px);margin-top:0}
  .side-om-os .oo-titel .aj-bar{grid-column:1 / -1;width:clamp(260px,27vw,525px);margin-top:-2px}
  .side-om-os .oo-streg{display:block;width:clamp(44px,4.7vw,90px);height:auto}
  .side-om-os .oo-streg2{width:clamp(54px,5.7vw,110px)}
  .side-om-os .oo-maskot{grid-column:1;grid-row:1 / 3;align-self:end;margin:clamp(-14px,-.7vw,0px) 0 0}
  .side-om-os .oo-maskot img{max-width:730px;margin-left:0}
  .side-om-os .oo-kort{grid-column:2;grid-row:2;align-self:start;margin-top:clamp(4px,.4vw,8px);max-width:843px;border-radius:24px;
    display:grid;grid-template-columns:clamp(110px,10vw,190px) minmax(0,1fr);column-gap:clamp(12px,1.1vw,20px);padding:clamp(20px,1.25vw,24px) clamp(18px,1.04vw,20px) clamp(22px,1.5vw,28px) clamp(14px,1.04vw,20px)}
  .side-om-os .oo-h2{grid-column:2;grid-row:1;font-size:clamp(28px,1.875vw,36px)}
  .side-om-os .oo-kort .aj-ul{grid-column:2;grid-row:2;width:80px;margin:8px 0 14px}
  .side-om-os .oo-ikon{float:none;grid-column:1;grid-row:1 / 4;align-self:center;width:100%;margin:0}
  .side-om-os .oo-tekst{grid-column:2;grid-row:3}
  .side-om-os .oo-tekst .aj-p{font-size:clamp(16px,.94vw,18px)}

  .side-om-os .oo-feat{margin-top:clamp(28px,1.7vw,33px)}
  .side-om-os .oo-grid{gap:clamp(22px,1.5vw,30px)}
  .side-om-os .oo-f{grid-template-columns:clamp(150px,20vw,204px) minmax(0,1fr);column-gap:clamp(12px,1vw,18px);border-radius:24px;box-shadow:9px 11px 0 var(--ink);
    padding:clamp(18px,1.6vw,30px) clamp(18px,1.25vw,24px) clamp(20px,1.4vw,26px) clamp(12px,.8vw,15px)}
  .side-om-os .oo-num{left:15px;top:15px;width:48px;height:48px;border-radius:10px;font-size:34px}
  .side-om-os .oo-fi{grid-row:1 / 3;margin-top:clamp(20px,1.6vw,30px)}
  .side-om-os .oo-f .aj-h3{font-size:clamp(28px,1.82vw,35px)}
  .side-om-os .oo-f .aj-ul{width:110px;margin:10px 0 14px}
  .side-om-os .oo-f .aj-p{font-size:clamp(16px,.9vw,18px)}
  .side-om-os .oo-tagrk{grid-column:2;align-self:end;margin-top:clamp(14px,1vw,20px);padding-left:0}
  .side-om-os .oo-f .aj-tag{font-size:clamp(19px,1.15vw,22px);border-width:4px;box-shadow:4px 4px 0 var(--ink);transform:rotate(-4deg)}
  .side-om-os .oo-gul{background:#FFD400}
  .side-om-os .oo-blaa{background:#3E9FE0}
  .side-om-os .oo-groen{background:#7CC242}

  .side-om-os .oo-badge{width:clamp(250px,16vw,300px);height:auto;aspect-ratio:236/325;margin-top:clamp(30px,2vw,40px)}
  .side-om-os .oo-badge::before{background:#3E9FE0}
  .side-om-os .oo-badge::after{left:6%;right:2.5%;top:11.7%;bottom:7.4%}
  .side-om-os .oo-badge p{font-size:clamp(26px,1.6vw,32px);line-height:.95;transform:rotate(-12deg);padding-top:6%}
}
/* Tre kort ved siden af hinanden: ikonet over teksten */
@media (min-width:1100px){
  .side-om-os .oo-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .side-om-os .oo-f{grid-template-columns:minmax(0,1fr);grid-template-rows:auto 1fr auto}
  .side-om-os .oo-fi{grid-row:1;width:clamp(110px,9vw,150px);margin:0 0 12px clamp(30px,2.6vw,50px)}
  .side-om-os .oo-ft{grid-column:1;grid-row:2}
  .side-om-os .oo-tagrk{grid-column:1;grid-row:3}
}
/* Bredt: ikonet til venstre for teksten som i designet, badge til hoejre for kortene */
@media (min-width:1700px){
  .side-om-os .oo-feat{display:flex;align-items:center;gap:clamp(10px,.8vw,16px)}
  .side-om-os .oo-grid{flex:1;min-width:0}
  .side-om-os .oo-badge{flex:none;margin:0}
  .side-om-os .oo-f{grid-template-columns:40% minmax(0,1fr);grid-template-rows:1fr auto}
  .side-om-os .oo-fi{grid-row:1 / 3;width:100%;margin:clamp(20px,1.6vw,30px) 0 0}
  .side-om-os .oo-ft{grid-column:2;grid-row:1}
  .side-om-os .oo-tagrk{grid-column:1 / -1;grid-row:2;justify-content:flex-end}
}
/* Visuel gennemgang 18/10 */
@media (min-width:900px){
  /* titlen stod skaevt, fordi padding-right laa paa hele oo-top; nu kun paa kortet */
  .side-om-os .oo-top{padding-right:0}
  .side-om-os .oo-kort{margin-right:clamp(0px,5vw,110px)}
}
@media (min-width:1100px) and (max-width:1699px){
  /* ikonerne har forskellig hoejde; fast hoejde, saa overskrifterne flugter */
  .side-om-os .oo-fi{height:clamp(110px,9vw,150px);width:auto;max-width:100%;object-fit:contain;object-position:left bottom}
}
@media (min-width:1700px){
  .side-om-os .oo-f .aj-h3{white-space:nowrap;font-size:clamp(26px,1.6vw,33px)}
  .side-om-os .oo-tagrk{grid-column:2;justify-content:flex-start}
}
/* Runde 2 (punkt 32): historiekortets hoejre kant flugter med featurekortene */
@media (min-width:900px){
  .side-om-os .oo-kort{margin-right:0;max-width:none}
}
/* 900-1099: ikonet styrede kortets hoejde, saa der blev for meget luft mellem tekst og maerkat */
@media (min-width:900px) and (max-width:1099px){
  .side-om-os .oo-f{grid-template-columns:150px minmax(0,1fr)}
  .side-om-os .oo-fi{max-width:150px;align-self:center;margin-top:0}
}
/* Badgen staar til hoejre for kortene allerede fra 1250 px i stedet for alene i en gul raekke */
@media (min-width:1250px) and (max-width:1699px){
  .side-om-os .oo-feat{display:flex;align-items:center;gap:clamp(10px,.8vw,16px)}
  .side-om-os .oo-grid{flex:1;min-width:0}
  .side-om-os .oo-badge{flex:none;margin:0;width:clamp(240px,18.5vw,300px)}
  .side-om-os .oo-badge p{font-size:clamp(26px,1.6vw,32px)}
}
/* Runde 2: fra 1700 px broed "100% FOKUS PÅ TRYGHED" og "MINDRE BØVL. MERE SJOV." over to linjer */
@media (min-width:1700px){
  .side-om-os .oo-f .aj-tag{white-space:nowrap}
}