.cmp-container--wellplannedkitchen {
  font-family: Archivo !important;

  >.cmp-container {
    display: flex;
    flex-direction: column;
    gap: 24px;
    align-items: center;
    padding: 0;
    max-width: 1360px;
    margin: 0 auto;

    @media (min-width: 1024px) and (max-width: 1439px) {
      padding: 0 40px;
      gap: 12px;
    }

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

    >.text {
      .cmp-text {
        display: flex;
        flex-direction: column;
        gap: 12px;
        align-items: center;

        @media (min-width: 1024px) and (max-width: 1439px) {
          gap: 4px;
        }

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

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

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

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

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

    >.tabs {
      width: 100%;

      .cmp-tabs {
        width: 100%;
        display: flex;
        gap: 20px;
        position: relative;
        align-items: start;
        background: #FAFAFA;

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

        @media (min-width: 1439px) {
          min-height: 540px;
          max-height: 540px;
        }

        @media (min-width: 1200px) and (max-width:1360px) {
          min-height: 400px;
          max-height: 400px;
        }

        @media (min-width: 1360px) and (max-width:1439px) {
          min-height: 450px;
          max-height: 450px;
        }

        .cmp-tabs__tablist {
          flex-direction: row;
          flex-wrap: nowrap;
          order: 2;
          width: 30%;
          display: flex;
          gap: 16px;
          font-size: 14px;
          font-weight: 500;
          border-bottom: 1px solid #E6E7EB;

          @media screen and (max-width: 650px) {
            width: 100%;
            padding-left: 10px;
            position: absolute;
            top: 270px;
          }

          .cmp-tabs__tab {
            padding: 5px;
            padding-bottom: 10px;
            color: #9DA1B0;
            cursor: pointer;
            font-size: 14px;
            font-weight: 500;
          }

          .cmp-tabs__tab--active {
            border-bottom: 1.5px solid #000;
            color: #202129;
            font-size: 14px;
            font-weight: 500;
          }
        }

        .cmp-tabs__tabpanel {
          width: 70%;

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

          >.container {
            >.cmp-container {
              >.image {
                @media screen and (max-width: 650px) {
                  padding-bottom: 0 !important;
                }

                img {
                  width: 100%;
                  border-radius: 10px 0 0 10px;

                  @media (min-width: 1439px) {
                    min-height: 540px;
                    max-height: 540px;
                  }

                  @media (min-width: 1200px) and (max-width:1360px) {
                    min-height: 400px;
                    max-height: 400px;
                  }

                  @media (min-width: 1360px) and (max-width:1439px) {
                    min-height: 450px;
                    max-height: 450px;
                  }
                  @media(max-width: 767px){
                    max-height: 260px;
                    min-height: unset;
                    border-radius: 0;
                  }
                }
              }

              .image~.iwpk-components-container {
                >.cmp-container {
                  position: absolute;
                  top: 50px;
                  right: 0;
                  width: 30%;
                  display: grid;
                  grid-template-columns: repeat(2, 1fr);
                  gap: 10px;
                  max-height: calc(100% - 50px);
                  overflow-y: scroll;

                  @media screen and (max-width: 650px) {
                    display: flex;
                    gap: 10px;
                    overflow-x: scroll;
                    top: unset;
                    right: unset;
                    bottom: -95%;
                    width: 100%;
                    padding-left: 10px;
                    max-height: 100%;
                    position: relative;
                    top: 60px;

                  }

                  .cmp-teaser {
                    display: flex;
                    flex-direction: column;
                    border-radius: 12px;
                    border: 1px solid #e6e7eb;

                    @media (max-width: 650px) {
                      min-width: 158px;
                    }

                    .cmp-teaser__content {
                      display: flex;
                      gap: 10px;
                      padding: 17px 10px;
                      align-items: center;
                      order: 2;

                      @media(max-width: 767px) {
                        padding: 0px 10px;
                        height: 45px;
                      }

                      .cmp-teaser__description {
                        p {
                          font-size: 14px;
                          font-weight: 500;
                          display: flex;
                          align-items: self-start;

                          span {
                            height: 16px;
                            width: 16px;
                            background: #000;
                            border-radius: 50%;
                            color: #fff;
                            display: flex;
                            align-items: center;
                            justify-content: center;
                            font-size: 10px;
                            font-weight: 600;

                            &:last-child {
                              margin-right: 6px;
                            }
                          }
                        }
                      }
                    }

                    .cmp-teaser__image {
                      @media screen and (max-width: 650px) {
                        min-height: 182px;
                      }

                      img {
                        height: 168px;
                        object-fit: cover;
                        border-top-left-radius: 12px;
                        border-top-right-radius: 12px;

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

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

              .image~.iwpk-zones-container {
                >.cmp-container {
                  position: absolute;
                  top: 50px;
                  right: 0;
                  width: 30%;
                  display: flex;
                  flex-direction: column;
                  gap: 12px;
                  @media (max-width: 767px){
                    position: relative;
                    width: 94%;
                    left: 3%;
                    top: 40px;
                  }
                  @media (min-width: 1279px) and (max-width: 1360px) {
                  height: 350px;
                   overflow-y: scroll;
                  }

                  @media (min-width: 1360px) and (max-width: 1440px) {
                  height: 397px;
                   overflow-y: scroll;

                  }

                  .cmp-teaser {
                    padding: 20px;
                    border: 1px solid #e6e7eb;
                    border-radius: 8px;
                    display: flex;
                    gap: 20px;
                    align-items: center;

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

                      .cmp-teaser__title {
                        font-size: 18px;
                        font-weight: 500;
                        color: #232426;
                        line-height: 101%;

                      }

                      .cmp-teaser__description {
                        font-size: 14px;
                        font-weight: 300;
                        color: #75787b;
                      }
                    }

                    .cmp-teaser__image {
                      img {
                        min-width: 50px;
                        height: 50px;
                      }
                    }
                  }
                }
              }
            }
          }
        }
      }
    }
  }
}

.cmp-container--wellplannedkitchen .cmp-container .image img {
  max-height: 540px;
  min-height: 540px;
}

@media (min-width: 1279px) and (max-width: 1360px) {
  .cmp-container--wellplannedkitchen .cmp-container .image img {
    max-height: 400px;
    min-height: 400px;
  }


}

@media (min-width: 1360px) and (max-width: 1440px) {
  .cmp-container--wellplannedkitchen .cmp-container .image img {
    max-height: 450px;
    min-height: 450px;
  }

}
@media (max-width: 767px){
  .cmp-container--wellplannedkitchen .cmp-container .image img{
    height: 260px;
    min-height: unset;
  }
}