.foundation-material-container {
font-family: Archivo;
  > .cmp-container {
    display: flex;
    flex-direction: column;
    gap: 30px;
        @media screen and (max-width: 650px) {
      padding: 0;
      gap: 15px;
      margin: 60px 0;
    }
  }

  .foundation-material-text {
    padding: 40px;
    padding-bottom: 0;
    padding-left: 0;

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

    .cmp-text {
      display: flex;
      flex-direction: column;
      gap: 13px;
      @media screen and (max-width: 650px){
      align-items: center;
      gap: 8px;
      }
      h1 {
        font-size: 32px;
        color: #232426;
        font-weight: 500;
        line-height: 101%;

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

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

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

  .foundation-material-teaser-container {

>.cmp-container {
  display: flex;
  gap: 20px;
  margin: 0 auto;
  max-width: 1360px;

  @media screen and (max-width: 650px) {
    padding-left: 20px;
    overflow-x: scroll;
      > *:last-child {
    margin-right: 16px;
   
  }
  }


}

    >.cmp-container::-webkit-scrollbar {
      display: none;
    }

    .teaser {
      width: 25%;
      @media screen and (max-width: 650px) {
        width: 100%;
      }

      .cmp-teaser {
        display: flex;
        flex-direction: column;
        gap: 15px;
        /* width: 325px; */

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

      .cmp-teaser__content {
        order: 2;
        display: flex;
        flex-direction: column;
        gap: 5px;
      }

      .cmp-teaser__title {
        font-size: 20px;
        font-weight: 600;
        color: #232426;
        line-height: 132%;

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

      .cmp-teaser__description {
        font-size: 14px;
        font-weight: 400;
        color: #75787b;
        line-height: 132%;

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

      .cmp-teaser__image {
        overflow: hidden;
        border-radius: 10px;

        .cmp-image__image {
          width: 100%;
          transition: transform 0.3s ease;
          height: 250px;
        }

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

      }

    }

  }

}

@media (min-width: 1024px) and (max-width: 1441px) {
  .foundation-material-container>.cmp-container {
    padding: 0 40px;

  }
}

@media (min-width: 1441px) and (max-width: 1599px) {
  .foundation-material-container .foundation-material-text .cmp-text {
    margin-left: 3%;
  }
  .unitsandaccessories-container .cmp-container .text{
  margin-left: 5%;
  }
}

/* Full HD Desktop */
@media (min-width: 1600px) and (max-width: 1679px) {
  .foundation-material-container .foundation-material-text .cmp-text {
    margin-left: 7.5%;
  }
    .unitsandaccessories-container .cmp-container .text{
  margin-left: 7.5%;
  }
}

@media (min-width: 1680px) and (max-width: 1900px) {
  .foundation-material-container .foundation-material-text .cmp-text {
    margin-left: 10.2%;
  }

}

@media (min-width: 1900px) {
  .foundation-material-container .foundation-material-text .cmp-text {
    margin-left: 14.8%;
  }
}