

.countdown-banner--full-width-false {
  isolation: isolate;
  border-radius: var(--block-border-radius, 16px); }



.countdown-banner {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 30px;
  position: relative;
  background: var(--color-bg);
  color: var(--color-text); }
  .countdown-banner--full-width-false {
    overflow: hidden; }
  .countdown-banner--inner {
    display: flex;
    flex-direction: column;
    justify-content: center;
    max-width: var(--grid-width, 1280px);
    width: 100%;
    margin: 0 auto; }
    @media only screen and (min-width: 768px) {
      .countdown-banner--inner.layout--horizontal {
        flex-direction: row;
        align-items: center; } }
    .countdown-banner--inner.layout--horizontal .countdown-banner--timer {
      display: flex;
      flex-wrap: wrap;
      flex-direction: column;
      align-items: center;
      justify-content: center; }
      @media only screen and (min-width: 768px) {
        .countdown-banner--inner.layout--horizontal .countdown-banner--timer {
          flex-direction: row;
          align-items: center;
          justify-content: flex-end;
          margin-left: 55px; } }
    @media only screen and (min-width: 768px) {
      .countdown-banner--inner.layout--horizontal .countdown-banner--content {
        text-align: left; }
        .countdown-banner--inner.layout--horizontal .countdown-banner--content > *:last-child {
          margin-bottom: 0; } }
    .countdown-banner--inner.layout--horizontal .button {
      margin-top: 15px; }
      @media only screen and (min-width: 768px) {
        .countdown-banner--inner.layout--horizontal .button {
          margin: 20px 0 20px 55px; } }
    .countdown-banner--inner.layout--vertical .countdown-banner--timer {
      display: flex;
      flex-wrap: wrap;
      flex-direction: column;
      align-items: center; }
    .countdown-banner--inner.layout--vertical .countdown-banner--content h2 {
      margin-bottom: 15px; }
    .countdown-banner--inner.layout--vertical .button {
      margin-top: 30px; }
  .countdown-banner h2 {
    margin-bottom: 5px;
    color: inherit; }
  .countdown-banner .subheading {
    font-size: 0.75rem; }
  .countdown-banner--bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0; }
    .countdown-banner--bg img {
      width: 100%;
      height: 100%;
      object-fit: cover; }
    .countdown-banner--bg .countdown-image--mobile {
      display: block; }
      @media only screen and (min-width: 768px) {
        .countdown-banner--bg .countdown-image--mobile {
          display: none; } }
    .countdown-banner--bg .countdown-image--desktop {
      display: none; }
      @media only screen and (min-width: 768px) {
        .countdown-banner--bg .countdown-image--desktop {
          display: block; } }
    .countdown-banner--bg--overlay {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: 1;
      background: var(--overlay-color);
      opacity: var(--overlay-opacity); }
  .countdown-banner--content {
    text-align: center; }
  .countdown-banner--content, .countdown-banner--timer {
    position: relative;
    z-index: 5; }
  .countdown-banner .countdown-timer {
    display: inline-flex;
    flex-wrap: wrap;
    justify-content: center;
    min-height: 80px; }
    .countdown-banner .countdown-timer--column {
      display: flex;
      flex-direction: column;
      text-align: center;
      justify-content: center;
      position: relative;
      padding: 0 12px; }
      @media only screen and (min-width: 768px) {
        .countdown-banner .countdown-timer--column {
          padding: 0 16px; } }
      .countdown-banner .countdown-timer--column--number {
        font-size: 2.25rem;
        line-height: 1; }
        @media only screen and (min-width: 768px) {
          .countdown-banner .countdown-timer--column--number {
            font-size: 3rem; } }
      .countdown-banner .countdown-timer--column--text {
        font-size: 0.625rem;
        text-transform: uppercase;
        letter-spacing: 0.1em; }
        @media only screen and (min-width: 768px) {
          .countdown-banner .countdown-timer--column--text {
            font-size: 0.75rem; } }
      .countdown-banner .countdown-timer--column + .countdown-timer--column .countdown-timer--column--number {
        position: relative; }
        .countdown-banner .countdown-timer--column + .countdown-timer--column .countdown-timer--column--number:before {
          content: ":";
          display: inline-flex;
          justify-content: center;
          width: 12px;
          font-size: 1.5rem;
          line-height: 2.25rem;
          position: absolute;
          top: 50%;
          transform: translateY(-50%);
          left: -16px; }
          @media only screen and (min-width: 768px) {
            .countdown-banner .countdown-timer--column + .countdown-timer--column .countdown-timer--column--number:before {
              font-size: 2.125rem;
              line-height: 3rem;
              left: -21px; } }
