/*

Usage:
@include breakpoint(laptop) {
  // styles for laptop and wider
}
@include breakpoint(laptop, 800px) {
  // styles for laptop width and screens up to 800px tall
  // useful for targeting shorter laptop screens
}

@include breakpoint(desktop, 900px) {
  // styles for desktop width but shorter screens
}
  */
/*-----------------------
EASING 
---------------------- */
.banner-fullscreen-cta {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  width: 100%;
  height: 100vh;
}
.banner-fullscreen-cta.has-overlay .hero-background::after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  mix-blend-mode: multiply;
  z-index: 2;
}
.banner-fullscreen-cta.has-overlay.overlay-color-gray .hero-background::after {
  background: rgba(var(--color-black-rgb), 0.5);
}
.banner-fullscreen-cta.has-overlay.overlay-color-blue .hero-background::after {
  background: rgba(var(--color-blue-rgb), 0.77);
}
.banner-fullscreen-cta .hero-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}
.banner-fullscreen-cta .hero-background .bg {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.banner-fullscreen-cta .hero-content {
  position: relative;
  z-index: 2;
  width: 100%;
  color: var(--color-white);
  text-align: center;
}
.banner-fullscreen-cta .hero-content h2, .banner-fullscreen-cta .hero-content h3, .banner-fullscreen-cta .hero-content h4, .banner-fullscreen-cta .hero-content h5, .banner-fullscreen-cta .hero-content h6, .banner-fullscreen-cta .hero-content p, .banner-fullscreen-cta .hero-content li {
  color: var(--color-white);
}
.banner-fullscreen-cta .hero-content .banner-content-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
}
.banner-fullscreen-cta .hero-content .banner-heading {
  width: 700px;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 0;
  text-align: center;
  font-size: var(--font-size-lg);
  line-height: 1.04;
}
.banner-fullscreen-cta .hero-content .banner-text-content {
  width: 784px;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}
.banner-fullscreen-cta .hero-content .gallery-modal-trigger {
  margin-top: 2rem;
}