.banner {
  --banner-height: auto;
  clip-path: var(--clip-wide-bottom1);
  overflow: hidden;
  margin-bottom: var(--vertical-padding);
  height: var(--banner-height);

  h1 {
    margin-bottom: .5rem;
  }
}

/* Size variations */
.banner-size--fullscreen {
  --banner-height: 80vh;
  min-height: 14rem;
}

.banner-size--tall {
  --banner-height: 25rem;
}

@media (max-width: 960px) {
  .banner-size--tall {
    --banner-height: 17rem;
  }
}

/* Standard variation */
.banner-size--standard {
  color: var(--color-blue);

  .breadcrumbs {
    color: var(--color-black);
  }

  .banner-content {
    background-color: var(--color-blue-lt);
    padding: var(--vertical-padding) 0
  }

  h1 {
    margin-bottom: .75rem;
  }
}

@media (max-width: 1200px) {
  .banner-size--standard .banner-content {
    padding-left: 0;
    padding-right: 0;
  }
}

/* Tall and Fullscreen variations */
.banner-size--tall,
.banner-size--fullscreen {
  background-color: var(--color-dk-grey);
  color: var(--color-white);

  .banner-content,
  a {
    color: var(--color-white);
  }

  .banner-content {
    position: absolute;
    top: 8rem;
    z-index: 25;
    width: 100%;

    font-size: .9rem;
  }
}

.banner-size--fullscreen .banner-content {
  --full-banner-offset: 6rem;
  height: calc(var(--banner-height) - var(--full-banner-offset));
  top: var(--full-banner-offset);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

@media (min-width: 960px) {
  .banner-size--tall,
  .banner-size--fullscreen {
    clip-path: var(--clip-wide-bottom2);
  }

  .banner-size--tall .banner-content {
    top: 12rem;
  }

  .banner-size--fullscreen .banner-content {
    --full-banner-offset: 10rem;
  }
}

.banner-media {
  display: grid;
  height: 100%;

  div {
    display: grid;
    height: 100%;
  }

  video,
  img {
    object-fit: cover;
    height: 100%;
    width: 100%;
  }


}