.feature-section-wrapper {
  .feature_section--container {
    padding: var(--sizing-xl) var(--sizing-l);
    overflow: hidden;

    @media (width >= 768px) {
      margin: auto;
      padding: var(--spacing-big) var(--container-margin);
    }

    @media (width >= 1024px) {
      padding: 50px var(--container-margin);
    }

    .feature_section--info {
      display: flex;
      flex-flow: column;
      align-items: center;
      gap: var(--spacing-xsmall);

      @media (width >= 1024px) {
        gap: var(--spacing-small);
      }

      .feature_section--title {
        color: var(--neutrals-sub-texts-paragraphs);
        text-align: center;
        font-feature-settings: var(--font-settings);
        font-size: 2rem;
        font-weight: var(--fw-500);
        line-height: var(--lh-normal);
        max-width: 540px;

        @media (width>=768px) {
          font-size: 2.4rem;
          line-height: var(--lh-37);
          font-weight: var(--fw-400);
        }

        @media (width >= 1024px) {
          max-width: 768px;
          font-size: var(--fs-xxlarge);
          font-weight: var(--fw-500);
        }
      }

      .feature_section--description {
        color: var(--neutrals-sub-texts-grey);
        text-align: center;
        font-size: 1.2rem;
        font-style: normal;
        font-weight: var(--fw-400);
        line-height: var(--lh-16);
        letter-spacing: var(--ls-024);
        max-width: 540px;

         @media (width>=768px) {
          font-size: 1.4rem;
          line-height: var(--lh-20);
        }

        @media (width >= 1024px) {
          max-width: 768px;
          font-size: var(--fs-medium);
          line-height: var(--lh-21);
          letter-spacing: unset;
        }
      }
    }

    .feature_section--items-wrapper {
      margin-top: var(--spacing-big);

      @media (width >= 768px) {
        margin-top: var(--spacing-medium);
      }

      @media (width >= 1024px) {
        margin-top: var(--spacing-3xl);
      }

      .feature_section--items-container {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: var(--spacing-small);

        @media (width >= 768px) {
          grid-template-columns: repeat(4, 1fr);
        }

        .feature-item {
          display: flex;
          flex-flow: column;
          align-items: center;
          background-color: var(--bg-grey-light);
          padding: var(--spacing-xs);
          min-height: 178px;

          @media (width >= 768px) {
            min-height: 214px;
            padding: var(--spacing-small);
          }

          @media (width >= 1024px) {
            min-height: 298px;
            padding: var(--spacing-medium);
          }

          .feature-item-icon-wrapper {
            width: 32px;
            height: 32px;
            background-color: var(--tertiary-color);
            border-radius: 100px;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;

            @media (width >= 768px) {
              width: 40px;
              height: 40px;
            }

            @media (width >= 1024px) {
              width: 60px;
              height: 60px;
            }

            .feature-item-icon {
              width: 16px;
              height: 16px;

              @media (width >= 768px) {
                width: 24px;
                height: 24px;
              }

              @media (width >= 1024px) {
                width: 32px;
                height: 32px;
              }
            }
          }

          .feature-item-title {
            color: var(--neutrals-sub-texts-paragraphs);
            text-align: center;
            font-size: var(--fs-small);
            font-style: normal;
            font-weight: var(--fw-600);
            line-height: var(--lh-17);
            margin-top: var(--spacing-xsmall);

            @media (width >= 768px) {
              line-height: var(--lh-medium);
            }

            @media (width >= 1024px) {
              font-size: var(--fs-xmedium);
              line-height: var(--lh-25);
              margin-top: var(--spacing-medium);
            }
          }

          .feature-item-description {
            color: var(--neutrals-sub-texts-grey);
            text-align: center;
            font-size: var(--fs-xsmall);
            font-style: normal;
            font-weight: var(--fw-400);
            line-height: var(--lh-xsmall);
            margin-top: var(--spacing-xxsmall);

            @media (width >= 768px) {
              line-height: var(--lh-small);
              margin-top: var(--spacing-xsmall);
            }

            @media (width >= 1024px) {
              font-size: var(--fs-small);
              margin-top: var(--spacing-xs);
            }
          }
        }
      }
    }
  }
}