.banner-apps {
  display: flex;
  width: 100%;
  background: var(--color-red);
  color: var(--color-white);
  margin-bottom: 120px;
  margin-top: 120px;
  position: relative;
  justify-content: center;

  &:before {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1051.765' height='1119.58'%3E%3Cg fill='none' fill-rule='evenodd' stroke='%23FFF'%3E%3Cpath stroke-width='4' d='m5.603 1117.58 236.974-193.877c39.45-32.274 89.298-49.965 140.785-49.965h515.794l-236.979 193.884c-39.445 32.269-89.286 49.958-140.785 49.958H5.603Z'/%3E%3Cpath stroke-width='4' d='m452.132 943.31 236.974-193.877c39.45-32.273 89.298-49.964 140.785-49.964h515.794l-236.98 193.883c-39.444 32.269-89.286 49.958-140.784 49.958h-515.79Z'/%3E%3Cpath stroke-width='5' d='m590.125 512.447 237.164-194.264c39.481-32.339 89.369-50.065 140.897-50.065h516.206l-237.169 194.271c-39.476 32.334-89.357 50.058-140.897 50.058H590.125Z'/%3E%3Cpath stroke-width='5' d='m881.936 591.34 237.163-194.264c39.482-32.339 89.37-50.065 140.898-50.065h516.206l-237.169 194.27c-39.476 32.334-89.358 50.059-140.897 50.059H881.936Z'/%3E%3C/g%3E%3C/svg%3E");
    background-position: 100% 100%;
    background-repeat: no-repeat;
    content: " ";
    display: block;
    height: 100%;
    position: absolute;
    width: 100%;
    z-index: 0;
  }

  .container__general {
    display: flex;

    .text-container {
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -ms-flex-direction: column;
      flex-direction: column;
      gap: 24px;
      padding: 40px 0 32px;
      z-index: 1;

      .h_title {
        margin: 0;

        .alert-heading {
          color: var(--color-white);
          text-wrap: balance;
          text-align: start;
          max-width: none;
          font-size: 48px;
        }
      }

      .subtext {
        margin: 0;
        text-align: start;
        color: var(--color-white);
        padding: 0;

        ul {
          padding: 0;
          list-style: none;
          margin: 0;

          li {
            margin: 0 0 10px;
            position: relative;
            padding-left: 30px;
            font-weight: 300;
            font-size: 1rem;
            letter-spacing: 0.25px;

            a {
              color: var(--color-white);
              font-weight: 500;
              text-decoration: none;
            }

            &:before {
              background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg fill='none' stroke='%23FFF' stroke-width='2.5' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' aria-hidden='true'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='m4.5 12.75 6 6 9-13.5'/%3E%3C/svg%3E");
              background-repeat: no-repeat;
              background-size: cover;
              content: " ";
              display: inline-block;
              height: 20px;
              width: 20px;
              position: absolute;
              top: 50%;
              transform: translateY(-50%);
              left: 0;
            }
          }
        }
      }

      .app-links {
        display: flex;
        gap: 32px;
        z-index: 1;

        .android-link {
          display: inline-block;
          margin-right: 8px;
          vertical-align: middle;
        }

        .apple-link {
          display: inline-block;
          margin-right: 8px;
          vertical-align: middle
        }
      }
    }

    .image__container {
      -webkit-box-flex: 0;
      -webkit-box-orient: horizontal;
      -webkit-box-direction: reverse;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -ms-flex: none;
      flex: none;
      -ms-flex-direction: row-reverse;
      flex-direction: row-reverse;
      margin-bottom: -60px;
      margin-top: -60px;
      max-width: 374px;
      padding: 0;
      width: 100%;
      z-index: 1;

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

@media (max-width: 1024px) {
  .banner-apps {
    -webkit-box-direction: reverse;
    -ms-flex-direction: column-reverse;
    flex-direction: column-reverse;

    &:before {
      height: 360px;
      top: 0;
    }

    .container__general {
      flex-direction: column-reverse;
      margin: 0;

      .text-container {
        .h_title {
          margin-top: 16px;

          .alert-heading {
            margin: 0;
            font-size: 2rem;
          }
        }

        .app-links {
          justify-content: center;
        }
      }

      .image__container {
        width: 100%;
        max-width: none;

        img {
          height: 457px;
          max-width: none;
          width: unset;
        }
      }
    }
  }
}