.legacyandcraftmanshiprevamp {
font-family: Archivo;
  >.cmp-container {
    display: flex;
    padding: 40px 0;
    gap: 10px;
    max-width: 1240px;
    margin: 80px auto 0;

    @media screen and (max-width: 650px) {
      flex-direction: column;
      padding: 20px;
      gap: 40px;
    }
  }

  .legacy-container-text {
    width: 40%;
    display: flex;
    align-items: center;

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

    .cmp-text {

      h1 {
        font-size: 52px;
        font-weight: 500;
        color: #232426;
        line-height: 110%;

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

    }
  }

  .teaser-container-legacy {
    width: 60%;

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

    >.cmp-container {
      display: flex;
    }

    .teaser-container-legacy-left {
      padding-right: 40px;
      width: 50%;
      border-right: 1px solid #cacbcc;
      @media screen and (max-width: 650px) {
        padding-right: 14px;  
      }

      .cmp-container {
        display: flex;
        flex-direction: column;
      }
    }

    .teaser-container-legacy-right {
      padding-left: 40px;
      width: 50%;
      @media screen and (max-width: 650px) {
        padding-left: 14px;  
      }
      .cmp-container {
        display: flex;
        flex-direction: column;
      }

    }

    .teaser {

      .cmp-teaser {
        display: flex;
        gap: 20px;
        align-items: center;
         @media screen and (max-width: 650px) {
          gap: 10px;
        }
      }

      .cmp-teaser__content {
        order: 2;
      }

      .cmp-teaser__title {
        font-size: 20px;
        font-weight: 500;
        color: #2e2f32;

        @media screen and (max-width: 650px) {
          font-size: 14px;
          font-weight: 600;
          min-height: 48px;
        }
      }

      .cmp-teaser__image {

        .cmp-image__image {
          width: auto;

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

          img {
            width: 56px;
            object-fit: contain;

            @media screen and (max-width: 650px) {
              width: 40px;
              object-fit: contain;
            }
          }
        }

      }

    }

    .teaser+.teaser {
      border-top: 1px solid #CACBCC;
      padding-top: 30px;
      margin-top: 30px;

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

  }

}

@media (min-width: 1024px) and (max-width: 1439px) {
  .legacyandcraftmanshiprevamp>.cmp-container {
    padding: 40px 100px;
    margin: 0;
    width: 100%;
    max-width: unset;
  }
}