.opta-responsive-hero{
  display:block;
  position:relative;
  width:100vw;
  max-width:100vw;
  aspect-ratio:var(--opta-banner-desktop-ratio);
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
  overflow:hidden;
  line-height:0;
  padding:0;
  background:#f5f5f5;
}
.opta-responsive-hero picture,
.opta-responsive-hero__link{
  display:block;
  width:100%;
  height:100%;
  line-height:0;
}
.opta-responsive-hero img{
  display:block;
  width:100%;
  height:100%;
  margin:0 auto;
  object-fit:cover;
  object-position:center;
}
@media (max-width:849px){
  .opta-responsive-hero{aspect-ratio:var(--opta-banner-mobile-ratio);}
}

/* Mobil: Flatsome legger ofte vertikal section-padding rundt første blokk.
   Nullstill kun toppen på seksjonen som faktisk inneholder banneret,
   slik at heroen kan ligge helt inntil headeren uten manuell negativ margin. */
@media (max-width:849px){
  .section:has(.opta-responsive-hero[data-opta-banner]){
    padding-top:0!important;
    margin-top:0!important;
  }
  .section:has(.opta-responsive-hero[data-opta-banner]) > .section-content{
    padding-top:0!important;
    margin-top:0!important;
  }
}

/* Flatsome: fjern bare vertikal luft i seksjoner som faktisk inneholder X-Opta Banner. */
.section:has(.opta-responsive-hero[data-opta-banner]) > .section-content,
.section:has(.opta-responsive-hero[data-opta-banner]) .row:has(.opta-responsive-hero[data-opta-banner]),
.section:has(.opta-responsive-hero[data-opta-banner]) .col:has(.opta-responsive-hero[data-opta-banner]),
.section:has(.opta-responsive-hero[data-opta-banner]) .col-inner:has(.opta-responsive-hero[data-opta-banner]){
  min-height:0!important;
  height:auto!important;
  padding-top:0!important;
  padding-bottom:0!important;
  margin-top:0!important;
  margin-bottom:0!important;
}
.section:has(.opta-responsive-hero[data-opta-banner]),
.section:has(.opta-responsive-hero[data-opta-banner]) .ux-html,
.section:has(.opta-responsive-hero[data-opta-banner]) p{
  line-height:0!important;
}

/* Legacy-støtte dersom opta-hero-section fortsatt brukes manuelt. */
.opta-hero-section:has(.opta-responsive-hero[data-opta-banner]),
.opta-hero-section:has(.opta-responsive-hero[data-opta-banner]) .section-content,
.opta-hero-section:has(.opta-responsive-hero[data-opta-banner]) .row,
.opta-hero-section:has(.opta-responsive-hero[data-opta-banner]) .col,
.opta-hero-section:has(.opta-responsive-hero[data-opta-banner]) .col-inner{
  min-height:0!important;
  height:auto!important;
  padding-top:0!important;
  padding-bottom:0!important;
  margin-top:0!important;
  margin-bottom:0!important;
}