.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 */
@media (min-width: 960px) {
  .banner-size--fullscreen {
    --banner-height: 80vh;
    min-height: 14rem;
  }

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

/* 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-media {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    z-index: -1;
  }

  .banner-content {
    font-size: .9rem;
    padding-top: var(--full-banner-offset);
    position: relative;
    z-index: 9;
    width: 100%;
  }
}

.banner-size--fullscreen .banner-content {
  /* Offset is to make room for the header */
  --full-banner-offset: 4rem;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-bottom: 2rem;
}

@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: 7rem;
  }
}

@media (max-width: 767px) {
  .banner-size--fullscreen .banner-content {
    min-height: 95vh;
  }
}

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

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

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


}