.main-container-sadvantage {
  font-family: Archivo;
  > .cmp-container {
    display: flex;
    gap: 40px;
    max-width: 1360px;
    margin: 50px auto 100px;
       @media screen and (max-width: 650px) {
        gap: 16px;
      }
  }

  .text-container-sadvantage {
    display: flex;
    align-items: center;
    width: 20%;

    .cmp-text {
      display: flex;
      flex-direction: column;
      gap: 16px;

      @media screen and (max-width: 650px) {
        gap: 10px;
      }
    }

    h1 {
      font-size: 44px;
      font-weight: 500;
      color: #2e2f32;

      @media screen and (max-width: 650px) {
        font-size: 24px;
        text-align: center;
        color: #232426;
      }
    }

    p {
      font-size: 18px;
      font-weight: 300;
      color: #323232;

      @media screen and (max-width: 650px) {
        font-size: 14px;
        text-align: center;
        color: #75787B;
      }
    }
  }

  .teaser-container-sadvantage {
    width: 80%;

    >.cmp-container {
      width: 100%;
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 30px;

      @media screen and (max-width: 650px) {
        grid-template-columns: repeat(1, 1fr);
        gap: 10px;
      }
    }

    .cmp-teaser {
      display: flex;
      border-radius: 8px;

      .cmp-teaser__content {
        padding: 40px 28px;
        display: flex;
        flex-direction: column;
        gap: 6px;
        border-top-right-radius: 8px;
        border-bottom-right-radius: 8px;
        order: 2;
        justify-content: center;

        @media screen and (max-width: 650px) {
          padding: 10px;
        }
      }

      .cmp-teaser__title {
        font-size: 20px;
        font-weight: 600;

        @media screen and (max-width: 650px) {
          font-size: 14px;
        }
      }

      .cmp-teaser__description {
        font-size: 16px;
        font-weight: 400;
        color: #3b3d40;

        @media screen and (max-width: 650px) {
          font-size: 12px;
          color: #3B3D40;
        }
      }

      .cmp-teaser__image {
        min-width: 230px;

        @media screen and (max-width: 650px) {
          min-width: 160px;
        }

        .cmp-image__image {
          width: 100%;
          transition: transform 0.3s ease;
          object-fit: cover;
          height: 100%;
        }

        &:hover .cmp-image__image {
          transform: scale(1.1);
        }
      }
    }

    #sa-premium-laminate {
      background: #eae6e1;
      border-radius: 8px;
      height: 100%;
      overflow: hidden;
      max-height: 150px;
            @media (max-width: 767px){
         max-height: 100px;
      }
     
    }

    #sa-installation {
      background: #E6E9F0;
      border-radius: 8px;
      height: 100%;
      overflow: hidden;
      max-height: 150px;
      @media (max-width: 767px){
         max-height: 100px;
      }
    }

    #sa-pu {
      background: #fff7e8;
      border-radius: 8px;
      height: 100%;
      overflow: hidden;
        max-height: 150px;
              @media (max-width: 767px){
         max-height: 100px;
      }
    }

    #sa-advanced-liftup {
      background: #eeeeef;
      border-radius: 8px;
      height: 100%;
      overflow: hidden;
        max-height: 150px;
              @media (max-width: 767px){
         max-height: 100px;
      }
    }
  }
}

@media (max-width: 768px) {
  .main-container-sadvantage {
    >.cmp-container {
      flex-direction: column;
      padding: 20px;
      margin-bottom: 70px;
    }

    .text-container-sadvantage {
      width: 100%;
      
    }

    .teaser-container-sadvantage {
      width: 100%;
      grid-template-columns: 1fr;
    }
  }
}
@media (min-width: 1024px) and (max-width: 1439px) {
  .main-container-sadvantage > .cmp-container{
    padding: 0 40px;

  }
}