.banner-container {
  width: 100%;
  aspect-ratio: 1440 / 800;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;

  .background-container {
    width: 100%;
    height: 100%;

    .banner-background {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: bottom;

    }
  }
  .banner-content {
    max-width: 875px;
    position: absolute;
    text-align: center;
    color: #fff;

    .countdown-plate-container {
      display: flex;
      justify-content: center;
      gap: 75px;

      .days, .hours, .minutes, .seconds {
        text-align: center;
        height: 178px;

        label {
          font-family: Outfit;
          font-size: 16px;
          text-transform: uppercase;
          font-weight: 700;
        }
        .counter {
          color: #00FF90;
          text-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
          font-family: Oswald;
          font-size: 120px;
          font-weight: 700;
          line-height: 120px;
        }
      }
    }

    .content-header {
      color: #FFF;
      text-align: center;
      text-shadow: 0 4px 4px rgba(0, 0, 0, 0.40);
      font-size: 72px;
      font-weight: 900;
      line-height: normal;
    }
    .content-title {
      color: #FFF;
      text-align: center;
      text-shadow: 0 4px 4px rgba(0, 0, 0, 0.40);
      font-size: 36px;
      font-weight: 700;
      line-height: 45px;
      margin-bottom: 12px;
    }
    .content-info {
      width: 540px;
      margin: auto;
      color: #F1F1F1;
      text-align: center;
      font-size: 24px;
      font-weight: 500;
      line-height: normal;
    }
  }
}

@media screen and (max-width: 1024px) {
  .banner-container {
    height: 746px;
    aspect-ratio: 180/373;

    .banner-content {
      width: 320px;

      .countdown-plate-container {
        flex-wrap: wrap;
        gap: unset !important;
        margin-bottom: 20px;

        .days {
          width: 100%;

          label {
            color: #FFF;
            text-align: center;
            font-size: 12px !important;
            font-weight: 300 !important;
            line-height: normal !important;
          }
        }
        .hours, .minutes, .seconds {
          text-align: center;
          height: 70px;

          label {
            color: #FFF;
            text-align: center;
            font-size: 12px !important;
            font-weight: 300 !important;
            line-height: normal !important;
          }
          .counter {
            font-size: 42px !important;
            line-height: 42px !important;
          }
        }
        .minutes {
          margin: 0 32px;
        }
      }

      .content-header {
        font-size: 34px !important;
        line-height: normal !important;
      }
      .content-title {
        font-size: 20px !important;
        line-height: 20px !important;
      }
      .content-info {
        width: 320px;
        font-size: 16px !important;
        line-height: normal !important;
      }
      .button-group {
        margin-top: 45px !important;
      }
    }
  }
}