/*

	BREAKPOINTS

*/
:root {
  --break-mobile: $break-mobile;
  --break-small: $break-small;
  --break-medium: $break-medium;
  --break-large: $break-large;
  --break-xlarge: $break-xlarge;
  --break-xxlarge: $break-xxlarge;
}

:root {
  --grid-gap: 30px;
}
/*

	CONTAINER UTILITIES

*/
:root {
  --max-width: 100%;
}
@media (min-width: 1210px) {
  :root {
    --max-width: 1210px;
  }
}

/*

	THEME VARIABLES

*/
:root {
  --primary-maroon: #8A1E41;
  --PRIMARY-Maroon: #8A1E41;
  --PRIMARY-Purple: #682571;
  --primary-purple: #682571;
  --secondary-coral: #fc4351;
  --SECONDARY-Orange: #FF9F00;
  --secondary-orange: #FF9F00;
  --secondary-yellow: #ffd400;
  --GRAYS-White: #ffffff;
  --grays-white: #ffffff;
  --grays-lightest-gray: #f5f5f5;
  --GRAYS-Light-Gray: #D9D9D9;
  --grays-light-gray: #d9d9d9;
  --grays-middle-gray: #d0d0d0;
  --GRAYS-Middle-Gray: #d0d0d0;
  --grays-text-gray: #3B3B3B;
  --GRAYS-Text-Gray: #3B3B3B;
  --grayscale-black: #000;
  --grays-black: #000;
}

:root {
  --font-size-default: 1.0625rem;
  --font-size-bigger: calc(20/16 * 1rem);
  --font-size-smaller: calc(14/16 * 1rem);
}

.small-bold-all-caps {
  color: var(--GRAYS-Text-Gray);
  font-size: calc(12 / 16 * 1rem);
  font-variation-settings: "wght" 600;
  line-height: 1.66;
  letter-spacing: calc(0.6 / 16 * 1rem);
  text-transform: uppercase;
}

.curtain__headline {
  position: relative;
  background-color: var(--primary-maroon);
  overflow: hidden;
}
.curtain__headline:before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-image: url(../imgs/red-texture.webp);
  background-size: cover;
  background-position: 50%;
  filter: blur(10px);
}

.curtain__headline-text {
  position: relative;
  z-index: 2;
  color: var(--grays-white);
  padding: var(--grid-gap);
  text-align: center;
}

.page-end-ctas__h2 {
  text-align: center;
}

.curtain__panels {
  display: grid;
}
@media screen and (min-width: 1080px) {
  .curtain__panels {
    display: flex;
    min-height: 70vh;
  }
}

.curtain__panel {
  position: relative;
  transition: all 1.5s;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
}
@media screen and (min-width: 1080px) {
  .curtain__panel {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    flex: 1;
    overflow: hidden;
  }
}

.curtain__picture {
  display: block;
  aspect-ratio: 430/300;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
}
@media screen and (min-width: 1080px) {
  .curtain__picture {
    display: none;
  }
}

.curtain__picture--background {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  transition: all 1.5s;
  background-color: #000000;
}
@media screen and (max-width: 1079px) {
  .curtain__picture--background {
    overflow: hidden;
  }
}

.curtain__panel--open .curtain__picture--background img {
  opacity: 0.5;
}

.curtain__panel:nth-of-type(1) {
  --overlay-color: var(--secondary-yellow);
  --button-text-color: var(--grays-black);
}

.curtain__panel:nth-of-type(2) {
  --overlay-color: var(--primary-maroon);
  --button-text-color: var(--grays-white);
}

.curtain__panel:nth-of-type(3) {
  --overlay-color: var(--secondary-orange);
  --button-text-color: var(--grays-black);
}

.curtain__panel--overlaid::after {
  content: "";
  pointer-events: none;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: var(--overlay-color);
  opacity: 0.5;
}

@media screen and (min-width: 1080px) {
  .curtain__panel--open {
    flex: 2;
  }
}

.curtain__image {
  object-fit: cover;
  display: block;
  min-width: 100%;
  min-height: 100%;
  transition: all 1.5s;
}

.curtain__teaserbtn-container {
  position: absolute;
  z-index: 2;
  bottom: 44px;
  left: 0;
  right: 0;
  padding: 0 var(--grid-gap);
}

.curtain__teaser {
  position: relative;
  display: block;
  margin: 0 auto;
  transition: all 0.15s;
  color: var(--button-text-color);
  background-color: var(--overlay-color);
  border: none;
  /* Desktop/Buttons & Meta */
  font-family: "transducer-variable", sans-serif !important;
  font-variation-settings: "wght" 500, "wdth" 50;
  font-size: calc(20 / 16 * 1rem) !important;
  line-height: 1.57; /* 157.143% */
  font-style: normal;
  letter-spacing: 0.7px;
}
.curtain__panel--open .curtain__teaser {
  visibility: hidden;
  opacity: 0;
}

.curtain__content {
  visibility: hidden;
  opacity: 0;
  max-height: 0.1px;
  transition: all 0.1s;
  position: relative;
  padding: var(--grid-gap);
  color: var(--grays-white);
}
@media screen and (min-width: 1080px) {
  .curtain__content {
    max-height: unset;
    width: 36vw;
  }
}

.curtain__panel--open .curtain__content {
  visibility: visible;
  opacity: 1;
  max-height: 100vh;
  transition: all 2s;
}
@media screen and (min-width: 1080px) {
  .curtain__panel--open .curtain__content {
    max-height: unset;
    width: 36vw;
    position: relative;
    z-index: 4;
  }
}

@media screen and (min-width: 1080px) {
  .curtain__panel--overlaid .curtain__content {
    display: none;
  }
}

/*# sourceMappingURL=curtain.css.map */