// ---------- responsive layout
// XL
@media screen and (min-width: 1281px) {
  .featureCard {
    flex: 1 0 20% !important;
  }
}

// L
@media screen and (min-width: 835px) and (max-width: 1280px) {
  .featureCard {
    min-width: 40% !important;
    max-width: 50% !important;
  }
}

// M
@media screen and (min-width: 601px) and (max-width: 834px) {
  .whyRspack {
    padding: 16px !important;
    .whyRspackTitle {
      font-size: 32px !important;
      font-weight: 700 !important;
      line-height: normal !important;
      letter-spacing: -1.28px !important;
    }
    .whyRspackDescription {
      font-size: 19px !important;
      font-style: normal !important;
      font-weight: 400 !important;
      line-height: normal !important;
    }
  }
  .featureCard {
    min-width: 45% !important;
    max-width: 50% !important;
    .featureCardInner {
      padding: 16px !important;
    }
    .featureDescription {
      font-size: 14px !important;
    }
  }
}

// S
@media screen and (max-width: 600px) {
  .whyRspack {
    min-width: 100% !important;
    padding: 16px !important;
    .whyRspackTitle {
      font-size: 24px !important;
      font-style: normal !important;
      font-weight: 700 !important;
      line-height: normal !important;
      letter-spacing: -0.96px !important;
    }
    .whyRspackDescription {
      font-size: 16px !important;
      font-style: normal !important;
      font-weight: 400 !important;
      line-height: normal !important;
    }
  }
  .featureCard {
    min-width: 100% !important;
    .featureCardInner {
      padding: 16px !important;
    }
    .featureDescription {
      font-size: 14px !important;
    }
  }

  // extra
  .whyRspackBg {
    max-width: 50% !important;
    max-height: 50% !important;
  }
}

// -----dark mode
:global {
  html:not(.dark) {
    --rs-why-rspack-shadow-color: #f9f9f9;
    --rs-why-rspack-title-color: #0b0c0e;
    --rs-why-rspack-desc-color: #6b7075;

    --rs-why-rspack-card-stroke: rgba(226, 232, 240, 0.5);
    --rs-why-rspack-card-gradient: linear-gradient(
      135deg,
      rgba(255, 255, 255, 1),
      rgba(249, 249, 249, 0.5)
    );
    --rs-why-rspack-description-bg: linear-gradient(
      90deg,
      #0b0c0e 0%,
      rgba(11, 12, 14, 0.4) 100%
    );
  }
  html.dark {
    --rs-why-rspack-shadow-color: #23272f;
    --rs-why-rspack-title-color: white;
    --rs-why-rspack-desc-color: #c6cacd;
    --rs-why-rspack-card-stroke: #23272f;
    --rs-why-rspack-card-gradient: linear-gradient(
      135deg,
      rgba(255, 255, 255, 0),
      rgba(255, 255, 255, 0.03)
    );
    --rs-why-rspack-description-bg: linear-gradient(
      87deg,
      #fff -2.53%,
      rgba(255, 255, 255, 0.4) 103.84%
    );
  }
}

.features {
  width: 100%;
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  padding: 0px;

  .featureCard {
    display: flex;
    flex: 1 0 30%;
    align-self: stretch;

    .featureCardInner {
      flex: 1;

      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 16px;

      // style
      border-radius: 20px;
      border: 1px solid var(--rs-why-rspack-card-stroke);
      background: var(--rs-why-rspack-card-gradient);
      padding: 28px;

      // reset
      text-decoration: none;

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

        user-select: none;

        .featureIconImg {
          width: 150px;
          height: 110px;
        }
      }

      .featureContent {
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        gap: 8px;

        .featureTitle {
          color: var(--rs-why-rspack-title-color);

          font-size: 17px;
          font-style: normal;
          font-weight: 700;
          line-height: 1.5;

          // reset
          margin: 0;
        }

        .featureDescription {
          color: var(--rs-why-rspack-desc-color);

          font-size: 14px;
          font-style: normal;
          font-weight: 400;
          line-height: 24px; /* 150% */

          // reset
          margin: 0;
        }
      }
    }
  }
}
