.banner-block {
  --vertical-spacing: var(--space-48);
  --align: flex-start;
  --cta-top-margin: var(--space-32);
}

.banner-block .banner-block__images {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-24);
  align-items: var(--align);
  justify-content: var(--align);
}

/*when text before images, add space. Default is no space before images */
.banner-block__text + .banner-block__images {
  margin-top: var(--vertical-spacing);
}

/* when cta buttons are added need to add extra space under logos*/
.banner-block__images:has(+ .banner-block__cta) {
  margin-bottom: calc(var(--vertical-spacing) - var(--cta-top-margin));
}

.banner-block__header:last-child {
  margin-bottom: 0;
}

.banner-block__image {
  display: inline-block;
  max-width: fit-content;
  object-fit: contain;
}

.banner-block__image.height-128,
.banner-block__image.height-192,
.banner-block__image.height-256 {
  max-width: 300px;
}

.banner-block p:last-child {
  margin-bottom: 0;
}

.banner-block__cta {
  margin-top: var(--cta-top-margin);
}

.banner-block.-center {
  --align: center;
  display: flex;
  flex-flow: column wrap;
  align-items: var(--align);
  text-align: center;
}

@media screen and (min-width: 1000px) {
  .banner-block {
    --vertical-spacing: var(--space-96);
    --cta-top-margin: var(--space-64);
  }

  .banner-block__text.-narrow {
    max-width: 70%;
  }
}

@media screen and (min-width: 1600px) {
  .banner-block {
    --cta-top-margin: var(--space-96);
  }
}
/* Custom code */
@media screen and (max-width: 1199px) {
    * {
      --hero-compensate-overlap: var(--block-padding-vertical);
    }
    .plandisc-hero {
        padding-top: 0;
   }
   .plandisc-hero .visma-module {
        padding-top: calc(var(--block-padding-vertical) * 2);
   }
}
@media screen and (min-width: 1200px) and (max-width: 1599px) {
   * {
      --hero-compensate-overlap: var(--block-padding-vertical);
    }
   .plandisc-hero {
        height: calc(100vh - var(--block-padding-vertical));
        max-height: 84rem;
        min-height: 65rem;
    }
    .banner-block__cta.module-cta-container {
        margin-top: var(--space-48) !important;
    }

}

@media screen and (min-width: 1600px) {
   * {
      --hero-compensate-overlap: var(--block-padding-vertical);
    }
   .plandisc-hero {
        /* height: calc(100vh - var(--block-padding-vertical)); */
        max-height: 119rem;
        min-height: 65rem;
    }
    .banner-block__cta.module-cta-container {
        margin-top: var(--space-48) !important;
    }

}

/* Custom adjusted backgrounds */

.plandisc-hero {
    position: relative;
    overflow: hidden;
}
.plandisc-hero .banner-block {
    position: relative; 
    z-index: 2;
    max-width: 62rem;
}
.plandisc-hero .video__container {
    position: absolute;
}
.plandisc-hero .video__container video {
    height: 100%;
}

.plandisc-hero .video__container canvas {
    height: 100%;
}
@media screen and (max-width: 699px) {
  .plandisc-hero {
      height: calc(100vh - 7.2rem); /* Offset navigation height */
      max-height: 730px;
  }
  .plandisc-hero .video__container {
      bottom: -20%;
      right: -20%;
      height: 500px;
      width: auto;
      aspect-ratio: 1 / 1;  
  }
  .plandisc-hero .visma-module {
      padding-top: 0;
      margin-top: var(--block-padding-vertical);
  }
}
@media screen and (min-width: 700px) and (max-width: 1199px) {
  .plandisc-hero {
      height: calc(100vh - 7.2rem); /* Offset navigation height */
      max-height: 730px;
  }
  .plandisc-hero .video__container {
      bottom: -20%;
      right: -15%;
      height: 650px;
      width: auto;
      aspect-ratio: 1 / 1;  
  }
  .plandisc-hero .visma-module {
      padding-top: 0;
      margin-top: var(--block-padding-vertical);
  }
}
@media screen and (min-width: 1200px) and (max-width: 1999px) {
  .plandisc-hero .video__container {
      top: 0;
      left: 50%;
      height: 100%;
      width: auto;
      aspect-ratio: 1 / 1;  
  }
}
@media screen and (min-width: 2000px) and (max-width: 2700px) {
  .plandisc-hero .video__container {
      right: 0;
      top: 50%;
      transform: translate(0%, -50%);
      height: 100%;
      width: auto;
      aspect-ratio: 1 / 1;  
  }
}
@media screen and (min-width: 2701px) {
  .plandisc-hero .video__container {
      right: 0;
      top: 50%;
      transform: translate(0%, -50%);
      height: 130%;
      width: auto;
      aspect-ratio: 1 / 1;  
  }
}
@media screen and (min-width: 1200px)
  .background.visma-module-wrapper.plandisc-hero {
      padding-top: calc(2rem + var(--block-padding-vertical))
  }
}
/*
.plandisc-hero.background-light-4 .video__container {
    right: -10%;
    top: 0;
    height: 100%;
    width: auto;
    aspect-ratio: 1 / 1;  
}

.plandisc-hero.background-dark-1 .video__container {
    right: 0%;
    bottom: 0%;
    height: 90%;
    width: auto;
    aspect-ratio: 1 / 1;  
}

.plandisc-hero.background-dark-3 .video__container {
    right: -15%;
    top: 8rem;
    height: auto;
    width: 60%;
    aspect-ratio: 1 / 1;
}

.plandisc-hero.background-dark-4 .video__container {
    bottom: -10%;
    height: 95%;
    right: -5%;
    transform: rotate(143deg);
    width: auto;
    aspect-ratio: 1 / 1;
}

.plandisc-hero.background-dark-2 .video__container {
    bottom: -10%;
    height: 95%;
    right: -5%;
    transform: rotate(143deg);
    width: auto;
    aspect-ratio: 1 / 1;
}
*/





@media screen and (min-width: 1200px) {
  .plandisc-hero .banner-block {
    padding-top: var(--block-padding-vertical);
  }
}
.plandisc-hero .-compensate-overlap {
  padding-bottom: calc(var(--hero-compensate-overlap) * 1.5);
}
@media screen and (max-width: 1599px) {
  .plandisc-hero .-compensate-overlap {
    padding-bottom: calc(var(--hero-compensate-overlap) * 1.5);
  }
}
@media screen and (min-width: 1600px) {
  .plandisc-hero .-compensate-overlap {
    padding-bottom: calc(var(--hero-compensate-overlap) * 1.5);
  }
}
.negative-margin-top {
    background-color: transparent;
    margin-top: calc(var(--hero-compensate-overlap) * -1.5);
    padding-top: 0;
}
  