section.most-popular-badge {
  padding: 80px;

  @media (max-width: 924px) {
    padding: 40px;
  }

  @media (max-width: 768px) {
    padding: 40px 0;
  }

  /* Neutralise Bootstrap's .container (0 15px padding + fixed 750/970/1170
     widths) and .row (0 -15px margin) so the section's padding is the only
     thing setting the content inset. */
  .container {
    width: 100%;
    max-width: 1280px;
    padding: 0;
    margin: 0 auto;
  }

  .container > .row {
    margin: 0;
  }

  .container > * + * {
    margin-top: 45px;

    @media (max-width: 768px) {
      margin-top: 24px;
    }
  }

  .section-title {
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: 16px;

    /* The section has no side padding on mobile so the cards can bleed to the
       edges, so the title block carries its own inset. */
    @media (max-width: 768px) {
      gap: 24px;
      padding: 0 20px 16px;
    }

    h2 {
      font-weight: 600;
      font-size: clamp(26px, 5vw, 48px);
      line-height: 1;
      margin: 0;

      .mobile-br {
        display: none;

        @media (max-width: 768px) {
          display: block;
        }
      }
    }

    p {
      font-weight: 400;
      font-size: clamp(14px, 2vw, 20px);
      line-height: 1.5;
      text-align: center;
      margin: 0;
    }
  }

  .badge-cards {
    display: flex;
    justify-content: space-between;
    gap: 20px;

    @media (max-width: 924px) {
      flex-direction: column;
      gap: 24px;
    }

    .badge-card {
      flex: 1;
      max-width: 630px;

      @media (max-width: 924px) {
        margin: 0 auto;
      }

      /* Full-bleed to the screen edges on mobile. */
      @media (max-width: 768px) {
        max-width: none;
        margin: 0;
      }

      .badge-card-header {
        display: flex;
        flex-direction: column;
        gap: 30px;
        padding: 42px 56px;
        position: relative;
        background-repeat: no-repeat;
        background-position: 10% 5%;

        @media (max-width: 768px) {
          padding: 18px 35px;
          gap: 18px;
          background-size: cover;
          background-position: 10% 0;
        }

        &::before {
          content: "";
          background: linear-gradient(
            270deg,
            rgba(9, 9, 17, 0.6) 1.77%,
            rgba(63, 63, 119, 0.6) 99.98%
          );
          position: absolute;
          inset: 0;
          z-index: 0;
        }

        .badge-card-header-content {
          position: relative;
          display: flex;
          flex-direction: column;
          gap: 24px;
          z-index: 1;

          @media (max-width: 768px) {
            gap: 14px;
          }

          h3 {
            color: #fff;
            margin: 0;
            font-weight: 600;
            font-size: clamp(18.84px, 3vw, 30.14px);
            line-height: 1;
          }

          ul {
            display: flex;
            flex-direction: column;
            gap: 12px;
            padding: 0;
            margin: 0;
            list-style: none;

            li {
              display: flex;
              align-items: center;
              gap: 8px;
              color: #fff;
              font-weight: 400;
              font-size: clamp(12px, 1.5vw, 16px);
              line-height: 1.5;

              img {
                filter: brightness(4);
                flex-shrink: 0;

                @media (max-width: 768px) {
                  width: 20px;
                  height: auto;
                }
              }
            }
          }
        }

        .button-unfill {
          position: relative;
          color: #fff;
          font-weight: 600;
          font-size: clamp(13.19px, 1.5vw, 15.07px);
          line-height: 1;
          text-transform: uppercase;
          text-decoration: none;
          z-index: 1;
          padding: 15.07px 18.84px;
          border: 1.88px solid #fff;
          width: fit-content;
          display: inline-flex;
          align-items: center;
          gap: 8px;
          transition: all 0.3s ease;

          @media (max-width: 768px) {
            padding: 9.42px 15.07px;
          }

          &:hover {
            background-color: #fff;
            color: #000;

            svg path {
              fill: #000;
            }
          }

          .btn-arrow-right {
            transition: transform 0.3s ease;

            @media (max-width: 768px) {
              width: 18px;
              height: auto;
            }
          }

          &:hover .btn-arrow-right {
            transform: translateX(4px);
          }
        }
      }

      /* .badge-card-body {
        background-color: #d9d9d9;
        display: flex;
        border: 0 solid rgba(9, 9, 17, 0.7);
        border-width: 0 4px 4px 4px;
        height: 236px;

        @media (max-width: 768px) {
          height: 147px;
        }

        .image-container {
          width: 100%;
          display: flex;
          align-items: center;
          justify-content: center;

          img {
            width: 100%;
            height: 100%;
            object-fit: contain;
            mix-blend-mode: multiply;
          }
        }
      } */
      .badge-card-bottom {
        background-color: #d9d9d9;
        display: flex;

        img{
          width: 100%;
          height: 100%;
          object-fit: contain;
          mix-blend-mode: multiply;
        }
      }
    }
  }
}