:root {
  --nd-hero-aspect-ratio: 1;
  --nd-hero-height: calc(var(--nd-container-inner) / (var(--nd-hero-aspect-ratio)));
  --nd-hero-top-position: calc(-1 * var(--nd-hero-height) - 24px);
  --nd-hero-scroll-height: 112px;
  --nd-hero-scroll-top-position: calc(var(--nd-hero-top-position) + var(--nd-hero-height) - var(--nd-hero-scroll-height));
  --nd-hero-scroll-gap: -24px;
  --nd-callout-max-width: 450px;
  --nd-callout-offset-x: 30px;
  --nd-callout-offset-y: 30px;
}

@media (min-width: 640px) {
  :root {
    --nd-hero-aspect-ratio: 1;
  }
}

@media (min-width: 1280px) {
  :root {
    --nd-hero-aspect-ratio: 9/4;
  }
}

@media (min-width: 1536px) {
  :root {
    --nd-hero-aspect-ratio: 7/3;
  }
}

@media (min-width: 1536px) {
  :root {
    --nd-hero-scroll-gap: 0px;
  }
}

#hero {
  margin-top: calc(var(--nd-header-full-offset) * -1);
  padding-top: var(--nd-header-full-offset);
}

#hero .custom-row {
  align-items: start;
}

@media (max-width: 1536px) {
  #hero .custom-row {
    align-items: center;
  }
}

#hero h1.hero-title {
  flex-basis: calc(66% - 12px) !important;
}

#hero h1.hero-title:is(.hero-title-full-width) {
  flex-basis: 90% !important;
}

@media (max-width: 1536px) {
  #hero h1.hero-title {
    flex-basis: calc(50% - 12px) !important;
  }
}

@media (max-width: 1280px) {
  #hero h1.hero-title {
    flex-basis: 100% !important;
  }
}

@media (min-width: 1280px) {
  #hero h1.hero-title:is(.hero-title-full-width) {
    flex-basis: 66% !important;
  }
}

@media (min-width: 1536px) {
  #hero h1.hero-title:is(.hero-title-full-width) {
    flex-basis: 50% !important;
  }
}

#hero p.hero-text, #hero ul {
  flex-basis: calc(32% - 12px) !important;
}

@media (max-width: 1536px) {
  #hero p.hero-text, #hero ul {
    flex-basis: calc(50% - 12px) !important;
  }
}

@media (max-width: 1280px) {
  #hero p.hero-text, #hero ul {
    flex-basis: 100% !important;
  }
}

#hero video, #hero .hero-img img {
  border-radius: 18px;
  aspect-ratio: var(--nd-hero-aspect-ratio) !important;
  object-fit: cover;
  width: 100%;
}

#hero .hero-media {
  width: 100%;
  position: relative;
  background: transparent !important;
  top: calc(var(--nd-hero-scroll-top-position) + var(--nd-hero-scroll-gap)) !important;
  margin-bottom: calc(var(--nd-hero-scroll-top-position) + var(--nd-hero-scroll-gap)) !important;
}

#hero.home .hero-video-buttons {
  width: calc(100% - 72px);
}

#hero.home .mute-button {
  display: block;
}

/* @media (max-width: 1024px) {
  #hero.home .mute-button {
    visibility: hidden;
  }
} */

#hero.contact {
  z-index: 0;
}

#hero.contact .custom-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--wp--preset--spacing--40);
}

@media (min-width: 1280px ) {
  #hero.contact h1.hero-title {
    order: 1;
  }
}

#hero.contact ul.wp-block-list {
  order: 2;
}

#hero.contact .card-container {
  order: 3;
  width: 100%;
  display: flex;
  justify-content: center;
}

#hero.contact .card-container .netdev-card-callout {
  width: 100%;
  max-width: none;
  margin-left: auto;
  margin-right: auto;
  top: auto !important;
  margin-bottom: 0 !important;
  position: relative;
}

#hero.contact figure.hero-img {
  order: 4;
  width: 100%;
}

#hero.contact .hero-media {
  order: 5;
  width: 100%;
}

@media (min-width: 1280px) {
  #hero.contact .custom-row {
    display: grid;
    grid-template-columns: 2fr 1fr;
    column-gap: 24px;
    row-gap: 24px;
    grid-template-areas:
            "title list"
            "media media";
    position: relative;
  }
  #hero.contact h1.hero-title {
    grid-area: title;
  }
  #hero.contact ul.wp-block-list {
    grid-area: list;
  }
  #hero.contact figure.hero-img {
    grid-area: media;
    z-index: 1;
  }
  #hero.contact .hero-media {
    grid-area: media;
    z-index: 2;
    top: -81px !important;
  }
  #hero.contact .card-container {
    grid-area: media;
    z-index: 3;
    justify-self: end;
    align-self: end;
    margin: 0 var(--nd-callout-offset-x) var(--nd-callout-offset-y) 0;
    width: auto;
  }
  #hero.contact .card-container .netdev-card-callout {
    width: min(var(--nd-callout-max-width), 100%);
    max-width: var(--nd-callout-max-width);
    margin: 0;
    top: auto !important;
    margin-bottom: 0 !important;
    position: relative;
  }
}

@media (min-width: 1513px) {
  #hero.contact .hero-media {
    top: -1px !important;
  }
}

#hero.mentions-legales h1.hero-title {
  flex-basis: calc(33% - 12px) !important;
}

@media (max-width: 1280px) {
  #hero.mentions-legales h1.hero-title {
    flex-basis: 100% !important;
  }
}

#hero.mentions-legales p.hero-text, #hero.mentions-legales ul {
  flex-basis: calc(66% - 12px) !important;
}

@media (max-width: 1280px) {
  #hero.mentions-legales p.hero-text, #hero.mentions-legales ul {
    flex-basis: 100% !important;
  }
}

#hero.mentions-legales p.hero-text a, #hero.mentions-legales ul a {
  font-style: italic;
  font-weight: 500;
}

#hero.mentions-legales p.hero-text a:hover, #hero.mentions-legales ul a:hover {
  text-decoration: underline;
}