.banner_numbers {
  margin-bottom: 40px;
  padding: 0 24px;

  .banner-numbers-container {
    display: flex;
    width: 100%;
    background: linear-gradient(180deg,
        #fff,
        #fff 40px,
        #f6f6f6 0,
        #f6f6f6 calc(100% - 24px),
        #fff calc(100% - 24px),
        #fff);
    margin-bottom: 144px;
    margin-top: 64px;
    width: 100%;
    max-width: 73.125rem;
    margin-left: auto;
    margin-right: auto;

    .banner-numbers-wrapper {
      width: 100%;
      display: flex;
      position: relative;
    }

    .banner-numbers-image {
      aspect-ratio: 1 / 1;
      height: 296px;
      position: absolute;
      left: 19px;

      img {
        width: 100%;
        height: 100%;
        -o-object-fit: cover;
        object-fit: cover;
      }
    }

    .banner-numbers-content {
      -ms-flex-align: center;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -ms-flex-direction: column;
      flex-direction: column;
      padding-top: 16px;
      padding-left: 33%;
      width: 100%;

      .field__items {
        gap: 92px;
        display: flex;
        flex-direction: column;

        .banner-numbers-row {
          -webkit-box-align: center;
          -ms-flex-align: center;
          align-items: center;
          display: -webkit-box;
          display: -ms-flexbox;
          display: flex;
          width: 100%;

          .banner-numbers-row__number {
            -webkit-box-align: end;
            -ms-flex-align: end;
            -webkit-box-pack: end;
            -ms-flex-pack: end;
            align-items: flex-end;
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            justify-content: flex-end;
            padding-right: 16px;
            text-align: right;
            width: 57%;

            .subtext {
              color: var(--color-red);
              font-size: 3.5rem;
              font-weight: 300;
              letter-spacing: 0;
              line-height: 48px;
              margin: 0;
            }
          }

          .banner-numbers-row__number-symbol {
            color: var(--color-red);
            font-size: 2rem;
            font-weight: 300;
            letter-spacing: 0;
            line-height: 40px;
          }

          .banner-numbers-row__text {
            border-left: 1px solid var(--color-gray-dark);
            padding-left: 16px;
            width: 43%;

            .alert-heading {
              color: var(--color-gray-darker3);
              font-size: 1.25rem;
              letter-spacing: 0;
              line-height: 28px;
              text-wrap: balance;
              margin: 0 auto;
              max-width: 40ch;
              text-align: center;
              font-weight: 500;
            }

            .subtext {
              color: var(--color-gray-darker);
              letter-spacing: 0.25px;
              line-height: 20px;
              margin: 0 auto;
              text-align: start;
              font-weight: 300;
              color: var(--color-gray-darker);
              font-size: .875rem;
              line-height: 20px;
            }
          }
        }
      }
    }
  }
}

@media (max-width: 1200px) {
  .banner_numbers {
    .banner-numbers-container {

      .banner-numbers-content {
        .field__items {
          .banner-numbers-row {
            .banner-numbers-row__number {
              .subtext {
                font-size: 2.1875rem;
                line-height: 3.25rem;
              }
            }

            .banner-numbers-row__text {
              .alert-heading {
                font-size: 20px;
                font-weight: 500;
                line-height: 28px;
              }

              .subtext {
                font-weight: 300;
                letter-spacing: 0;
                line-height: 28px;
              }
            }
          }
        }
      }
    }
  }
}

@media (max-width: 1024px) {
  .banner_numbers {
    .banner-numbers-container {
      /* max-width: 768px !important; */
      padding-left: 24px;
      padding-right: 24px;
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
      -ms-flex-direction: column;

      .banner-numbers-wrapper {
        width: 100%;
        display: block;
        position: static;
      }

      .banner-numbers-image {
        aspect-ratio: 16 / 9;
        height: auto;
        width: 100%;
        position: static;
      }

      .banner-numbers-content {
        width: 100%;
        padding-left: 0;

        .field__items {
          gap: 16px;
          width: 100%;


          .banner-numbers-row {
            flex-direction: column;

            .banner-numbers-row__number {
              -webkit-box-pack: start;
              -ms-flex-pack: start;
              justify-content: flex-start;
              text-align: left;
              width: 100%;

              .subtext {
                font-size: 2.1875rem;
                line-height: 52px;
              }
            }

            .banner-numbers-row__text {
              border: 0;
              padding: 0;
              width: 100%;

              .title {
                text-align: center;
              }
            }
          }
        }
      }
    }
  }
}

@media (max-width: 425px) {
  .banner_numbers {
    .banner-numbers-container {
      flex-direction: column;

      .banner-numbers-image {
        width: 100%;
      }

      .banner-numbers-content {
        width: 100%;

        .banner-numbers-row__number {
          .subtext {
            font-size: 2rem;
          }
        }
      }
    }
  }
}