@media (min-width: 38.75rem) {
  .col-12 > .promoOverlay .promoBlockWrap,
  .col-12 > .canvas > .promoOverlay .promoBlockWrap, .col-9 > .promoOverlay .promoBlockWrap,
  .col-9 > .canvas > .promoOverlay .promoBlockWrap, .col-8 > .promoOverlay .promoBlockWrap,
  .col-8 > .canvas > .promoOverlay .promoBlockWrap {
    flex-flow: column nowrap;
  }
  .col-12 > .promoOverlay .promoBlockWrap .image,
  .col-12 > .canvas > .promoOverlay .promoBlockWrap .image, .col-9 > .promoOverlay .promoBlockWrap .image,
  .col-9 > .canvas > .promoOverlay .promoBlockWrap .image, .col-8 > .promoOverlay .promoBlockWrap .image,
  .col-8 > .canvas > .promoOverlay .promoBlockWrap .image {
    flex-basis: 13.125rem;
    height: 100%;
  }
  .col-6 > .promoBlock.promoOverlay .image + .text .textWrap,
  .col-6 > .canvas > .promoBlock.promoOverlay .image + .text .textWrap, .col-4 > .promoBlock.promoOverlay .image + .text .textWrap,
  .col-4 > .canvas > .promoBlock.promoOverlay .image + .text .textWrap, .col-3 > .promoBlock.promoOverlay .image + .text .textWrap,
  .col-3 > .canvas > .promoBlock.promoOverlay .image + .text .textWrap {
    padding: 3.75rem 1.875rem;
  }
}

@media (min-width: 64rem) {
  .col-12 .promoBlock.promoOverlay,
  .col-9 .promoBlock.promoOverlay,
  .col-8 .promoBlock.promoOverlay {
    --promoBlock-text-headings: #ffffff;
    --typography-color-text: #ffffff;
    --cta-text-color: #ffffff;
    --cta-text-hover-color: #CC9F53;
    --cta-svg-color: #CC9F53;
    --cta-svg-hover-color: #CC9F53;
    --promoBlock-background-textWrap: #1C355E;
  }
  .col-12 > .promoOverlay .promoBlockWrap,
  .col-12 > .canvas > .promoOverlay .promoBlockWrap, .col-9 > .promoOverlay .promoBlockWrap,
  .col-9 > .canvas > .promoOverlay .promoBlockWrap, .col-8 > .promoOverlay .promoBlockWrap,
  .col-8 > .canvas > .promoOverlay .promoBlockWrap {
    flex-flow: row nowrap;
  }
  .col-12 > .promoOverlay .promoBlockWrap .image,
  .col-12 > .canvas > .promoOverlay .promoBlockWrap .image, .col-9 > .promoOverlay .promoBlockWrap .image,
  .col-9 > .canvas > .promoOverlay .promoBlockWrap .image, .col-8 > .promoOverlay .promoBlockWrap .image,
  .col-8 > .canvas > .promoOverlay .promoBlockWrap .image {
    width: 50%;
    flex: 1 1 50%;
  }
  .col-12 > .promoOverlay .promoBlockWrap .image + .text,
  .col-12 > .canvas > .promoOverlay .promoBlockWrap .image + .text, .col-9 > .promoOverlay .promoBlockWrap .image + .text,
  .col-9 > .canvas > .promoOverlay .promoBlockWrap .image + .text, .col-8 > .promoOverlay .promoBlockWrap .image + .text,
  .col-8 > .canvas > .promoOverlay .promoBlockWrap .image + .text {
    width: 50%;
    flex: 1 1 50%;
    margin: 2.5rem 0 3.75rem;
  }
  .col-12 > .promoOverlay .promoBlockWrap .image + .text::before,
  .col-12 > .canvas > .promoOverlay .promoBlockWrap .image + .text::before, .col-9 > .promoOverlay .promoBlockWrap .image + .text::before,
  .col-9 > .canvas > .promoOverlay .promoBlockWrap .image + .text::before, .col-8 > .promoOverlay .promoBlockWrap .image + .text::before,
  .col-8 > .canvas > .promoOverlay .promoBlockWrap .image + .text::before {
    position: absolute;
    left: -100%;
    top: 0;
    right: 0;
    bottom: 0;
    display: block;
    z-index: -1;
    content: "";
    background-color: var(--promoBlock-background-textWrap);
  }
}

@media (min-width: 80rem) {
  .col-12 > .promoOverlay,
  .col-12 > .canvas > .promoOverlay {
    width: auto;
    margin: 0 -1.875rem;
    max-width: none;
  }
  .col-6 > .promoBlock.promoOverlay .promoBlockWrap > .image,
  .col-6 > .canvas > .promoBlock.promoOverlay .promoBlockWrap > .image, .col-4 > .promoBlock.promoOverlay .promoBlockWrap > .image,
  .col-4 > .canvas > .promoBlock.promoOverlay .promoBlockWrap > .image {
    height: 17.5rem;
    flex: 1 1 17.5rem;
  }
  .col-6 > .promoBlock.promoOverlay .promoBlockWrap > .image + .text,
  .col-6 > .canvas > .promoBlock.promoOverlay .promoBlockWrap > .image + .text, .col-4 > .promoBlock.promoOverlay .promoBlockWrap > .image + .text,
  .col-4 > .canvas > .promoBlock.promoOverlay .promoBlockWrap > .image + .text {
    margin: -1.875rem 0 0;
  }
}

@media (min-width: 90rem) {
  .col-12 > .promoOverlay,
  .col-12 > .canvas > .promoOverlay {
    width: 100%;
    margin: 0;
    max-width: none;
  }
  .col-12 > .promoOverlay .promoBlockWrap > .image,
  .col-12 > .canvas > .promoOverlay .promoBlockWrap > .image {
    width: 65%;
    flex: 1 1 65%;
  }
  .col-12 > .promoOverlay .promoBlockWrap > .image + .text,
  .col-12 > .canvas > .promoOverlay .promoBlockWrap > .image + .text {
    width: 35%;
    flex: 1 1 35%;
    margin: 2.5rem 0 5.3125rem;
  }
}