#rich-prime-43-55-eu {
  --black-color: #000326;
  --white-color: #ffffff;
  --accent-color: #0081ff;
  --trans-dur: 250ms;
  --trans-timing-function: cubic-bezier(0.4, 0, 0.2, 1);

  container-type: inline-size;
  container-name: rich-container;

  font-family: "Montserrat", sans-serif;
  font-weight: 400;
  font-size: 18px;
  line-height: 1.4;
  color: var(--black-color);
  letter-spacing: 0.01em;
  text-align: left;
  background-color: #fff;

  max-width: 1156px;
  margin: 0 auto;

  p,
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    margin: 0;
    color: var(--black-color);
  }

  p,
  li {
    font-size: 18px;

    @container rich-container (min-width: 760px) {
      font-size: 24px;
    }

    @container rich-container (min-width: 960px) {
      font-size: 32px;
    }
  }

  ul,
  ol {
    padding-left: 0;
    margin: 0;
  }

  img {
    display: block;
    width: 100%;
    height: auto;
  }

  section {
    margin: 0 auto;
    padding: 64px 0 84px 0;

    @container rich-container (min-width: 760px) {
      padding: 144px 0 174px 0;
    }
  }

  .section-title {
    font-weight: 600;
    font-size: 30px;
    line-height: 1.2;
    letter-spacing: 0.01em;
    text-transform: uppercase;

    @container rich-container (min-width: 760px) {
      font-size: 42px;
    }

    @container rich-container (min-width: 960px) {
      font-size: 56px;
    }

    @container rich-container (min-width: 1460px) {
      font-size: 72px;
    }
  }

  .section-subtitle {
    display: flex;
    gap: 16px;
    align-items: center;
    font-weight: 700;
    font-size: 24px;
    line-height: 1.1;
    text-transform: uppercase;

    @container rich-container (min-width: 760px) {
      font-size: 36px;
      gap: 30px;
      height: 93px;
    }

    @container rich-container (min-width: 960px) {
      font-size: 42px;
      gap: 30px;
      height: 93px;
    }

    &::before {
      content: "";
      display: block;
      flex-shrink: 0;
      width: 1px;
      height: 43px;
      background-color: var(--black-color);
    }
  }

  @container rich-container (min-width: 760px) {
    .section-subtitle::before {
      height: 75px;
    }
  }

  .link {
    text-decoration: none;
  }

  .list {
    list-style: none;
  }

  .white-color {
    color: var(--white-color);
  }

  .wrap-container {
    max-width: 100%;
    padding: 0 28px;

    @container rich-container (min-width: 760px) {
      padding: 0 78px;
    }

    @container rich-container (min-width: 1680px) {
      padding: 0 144px;
    }
  }

  .btn-detail {
    border-radius: 50px;
    padding: 12px 24px;
    background-color: var(--black-color);
    color: var(--white-color);
    font-size: 18px;
    line-height: 1;
    transition: background-color var(--trans-dur) var(--trans-timing-function);

    &:hover,
    &:focus {
      background-color: var(--accent-color);
    }

    @container rich-container (min-width: 760px) {
      padding: 24px 54px;
      font-size: 24px;
    }
  }

  /* HERO SECTION */

  .optima-hero {
    padding: 54px 0;
    background: linear-gradient(180deg, #060714 39%, #252639 64.81%);

    @container rich-container (min-width: 760px) {
      padding: 84px 0 124px 0;
    }

    @container rich-container (min-width: 1680px) {
      padding: 144px 0 144px 0;
    }

    .hero-logo-wrap {
      max-width: 184px;
      margin-bottom: 54px;

      @container rich-container (min-width: 760px) {
        max-width: 455px;
        margin-bottom: 84px;
      }

      @container rich-container (min-width: 1460px) {
        max-width: 607px;
        margin-bottom: 144px;
      }
    }

    .hero-info {
      display: flex;
      flex-direction: column;
      align-items: center;

      .hero-main-text {
        margin-bottom: 24px;
        width: 270px;
        font-weight: 600;
        font-size: 30px;
        line-height: 1.1;
        letter-spacing: 0.01em;
        text-transform: uppercase;
        text-align: center;
        background: linear-gradient(90deg, #0577e6 0%, #23e7f1 83.5%);
        background-clip: text;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;

        @container rich-container (min-width: 560px) {
          font-size: 56px;
          width: 500px;
        }

        @container rich-container (min-width: 760px) {
          width: 700px;
        }

        @container rich-container (min-width: 960px) {
          font-size: 64px;
          margin-bottom: 54px;
          width: 100%;
        }
      }

      .hero-text {
        margin-bottom: 24px;
        width: 270px;
        font-weight: 300;
        font-size: 21px;
        line-height: 1.2;
        letter-spacing: 0.01em;
        text-transform: uppercase;
        text-align: center;
        color: #b7c1ea;

        @container rich-container (min-width: 560px) {
          font-size: 28px;
          width: 100%;
        }

        @container rich-container (min-width: 760px) {
          font-size: 36px;
          width: 100%;
        }

        @container rich-container (min-width: 960px) {
          padding-bottom: 54px;
        }
      }

      .hero-model-wrap {
        display: inline-flex;
        border: 0.5px solid var(--accent-color);
        margin-bottom: 54px;

        @container rich-container (min-width: 760px) {
          margin-bottom: 108px;
        }

        .model-text {
          font-size: 22px;
          text-transform: uppercase;
          padding: 6px 12px;
          line-height: 1;
          display: inline-block;

          @container rich-container (min-width: 560px) {
            font-size: 34px;
            padding: 9px 18px;
          }

          @container rich-container (min-width: 760px) {
            font-size: 45px;
            padding: 12px 24px;
          }

          &.optima {
            background-color: var(--accent-color);
            font-weight: 700;
          }

          &.series {
            color: var(--accent-color);
            font-weight: 300;
          }
        }
      }
    }
  }

  /* WHY-KIVI SECTION */

  .why-kivi {
    background-color: #46475c;
    color: var(--white-color);

    .wrap-container {
      display: flex;
      flex-direction: column;
      gap: 54px;

      @container rich-container (min-width: 760px) {
        gap: 84px;
      }

      .why-kivi-list-wrap {
        display: flex;
        flex-direction: column;
        gap: 54px;

        @container rich-container (min-width: 760px) {
          gap: 84px;
        }

        @container rich-container (min-width: 960px) {
          flex-direction: row;
          gap: 54px;
        }

        .why-kivi-list {
          display: flex;
          flex-direction: column;
          gap: 54px;

          @container rich-container (min-width: 760px) {
            gap: 84px;
          }

          .why-kivi-list-item {
            display: flex;
            gap: 32px;
            align-items: flex-start;

            @container rich-container (min-width: 760px) {
              gap: 60px;
            }

            .img-wrap {
              display: flex;
              flex-shrink: 0;
              gap: 16px;
              width: 49px;
              align-items: center;
              padding-top: 5px;

              @container rich-container (min-width: 760px) {
                width: 111px;
                gap: 30px;

                .img-wrap::after {
                  height: 81px;
                }
              }

              &::after {
                content: "";
                display: block;
                flex-shrink: 0;
                width: 1px;
                height: 50px;
                background-color: var(--white-color);
              }
            }

            @container rich-container (min-width: 760px) {
              .img-wrap::after {
                height: 81px;
              }
            }

            .why-kivi-list-text {
              align-self: center;
              font-size: 14px;

              @container rich-container (min-width: 760px) {
                font-size: 22px;
              }
            }
          }

          .why-kivi-list-item-partners {
            .partners-title {
              font-size: 16px;
              margin-bottom: 24px;

              @container rich-container (min-width: 760px) {
                font-size: 24px;
              }
            }

            .partners-wrap {
              display: flex;
              flex-direction: column;
              gap: 16px;

              @container rich-container (min-width: 760px) {
                flex-direction: row;
                align-items: start;
                gap: 30px;

                .decor-wrap {
                  display: flex;
                  align-items: center;
                  gap: 30px;
                  padding-top: 10px;

                  &::after {
                    content: "";
                    display: block;
                    flex-shrink: 0;
                    width: 1px;
                    height: 81px;
                    background-color: var(--white-color);
                  }
                }
              }

              .logos-wrap {
                display: flex;
                justify-content: space-between;
                gap: 16px;

                @container rich-container (min-width: 460px) {
                  justify-content: flex-start;
                  gap: 32px;
                }

                @container rich-container (min-width: 760px) {
                  flex-direction: column;
                  width: 111px;
                  flex-shrink: 0;
                  justify-content: center;
                  gap: 20px;
                }
              }

              .why-kivi-list-text {
                align-self: center;
                font-size: 14px;

                @container rich-container (min-width: 760px) {
                  font-size: 24px;
                }
              }
            }
          }
        }
      }
    }
  }

  /* QUANTUM SECTION */

  .quantum-dots {
    background-color: #000326;

    .quantum-dots-title {
      text-align: center;
      margin-bottom: 34px;

      @container rich-container (min-width: 760px) {
        margin-bottom: 84px;
      }

      .quantum-title-accent {
        background: linear-gradient(
          94deg,
          #ff7fff 0%,
          #0081ff 45.22%,
          #01ff94 96.54%
        );
        background-clip: text;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
      }
    }

    .quantum-dots-text {
      text-align: center;
      margin-bottom: 54px;
      max-width: 455px;
      margin-left: auto;
      margin-right: auto;

      @container rich-container (min-width: 760px) {
        margin-bottom: 84px;
        max-width: 508px;
      }

      @container rich-container (min-width: 960px) {
        max-width: 678px;
      }
    }
  }

  /* FRAMELESS SECTION */

  .frameless {
    background-image: url("https://allegro.stati.pl/AllegroIMG/PRODUCENCI/KIVI/720QB/img/frameless-mob.jpg");
    background-color: #46475c;
    background-repeat: no-repeat;
    background-size: 100%;
    background-position-x: center;

    @container rich-container (min-width: 560px) {
      background-image: url("https://allegro.stati.pl/AllegroIMG/PRODUCENCI/KIVI/720QB/img/frameless-tab.jpg");
    }

    @container rich-container (min-width: 760px) {
      padding: 114px 0 144px 0;
    }

    .frameless-title {
      max-width: 300px;

      @container rich-container (min-width: 560px) {
        text-align: center;
        max-width: 420px;
        margin-left: auto;
        margin-right: auto;
      }

      @container rich-container (min-width: 760px) {
        max-width: 575px;
      }

      @container rich-container (min-width: 960px) {
        max-width: 775px;
      }
    }

    .frameless-list {
      display: flex;
      flex-direction: column;
      gap: 24px;
      margin-top: 125%;

      @container rich-container (min-width: 560px) {
        margin-top: 65%;
        padding-left: 40%;
      }

      @container rich-container (min-width: 680px) {
        margin-top: 70%;
      }

      @container rich-container (min-width: 1160px) {
        margin-top: 75%;
      }

      .frameless-list-item {
        display: flex;
        gap: 10px;
        padding-left: 10px;
        color: var(--white-color);
        line-height: 1.6;

        &::before {
          content: "";
          flex-shrink: 0;
          display: block;
          width: 4px;
          height: 4px;
          margin-top: 11px;
          border-radius: 50%;
          background-color: var(--white-color);

          @container rich-container (min-width: 760px) {
            margin-top: 16px;
          }

          @container rich-container (min-width: 960px) {
            margin-top: 24px;
          }
        }
      }
    }
  }

  /* TECH SECTION */

  .technologies {
    background-color: var(--white-color);

    .technologies-list {
      display: flex;
      flex-direction: column;
      gap: 54px;

      @container rich-container (min-width: 760px) {
        gap: 84px;
      }

      @container rich-container (min-width: 1080px) {
        flex-direction: row;
        flex-wrap: wrap;
        row-gap: 84px;
        column-gap: 24px;
      }

      .technologies-list-item {
        display: flex;
        flex-direction: column;
        gap: 24px;

        @container rich-container (min-width: 760px) {
          gap: 54px;
        }

        @container rich-container (min-width: 1080px) {
          flex: 1 1 calc(50% - 12px);
        }

        .technologies-info {
          display: flex;
          flex-direction: column;
          gap: 24px;

          @container rich-container (min-width: 760px) {
            gap: 34px;
          }
        }
      }
    }
  }

  /* SOUND SECTION */

  .sound {
    background-image: url("https://allegro.stati.pl/AllegroIMG/PRODUCENCI/KIVI/720QB/img/sound-tv-mob.jpg");
    background-repeat: no-repeat;
    background-position: 50% 0%;
    background-size: contain;

    @container rich-container (min-width: 560px) {
      background-image: url("https://allegro.stati.pl/AllegroIMG/PRODUCENCI/KIVI/720QB/img/sound-tv-tab.jpg");
    }

    .sound-title {
      color: var(--white-color);
      text-align: center;
      width: 260px;
      margin: 0 auto;
      margin-bottom: 110%;

      @container rich-container (min-width: 560px) {
        width: 100%;
      }

      @container rich-container (min-width: 760px) {
        width: 600px;
      }

      @container rich-container (min-width: 960px) {
        width: 100%;
      }
    }

    .sound-list {
      display: flex;
      flex-direction: column;
      gap: 54px;

      @container rich-container (min-width: 760px) {
        padding-left: 69px;
        gap: 84px;
      }

      @container rich-container (min-width: 960px) {
        flex-direction: row;
        flex-wrap: wrap;
        row-gap: 84px;
        column-gap: 24px;
        padding-left: 0;
      }

      .sound-list-item {
        display: flex;
        flex-direction: column;
        gap: 24px;

        @container rich-container (min-width: 760px) {
          gap: 37px;
        }

        @container rich-container (min-width: 960px) {
          flex: 1 1 calc(50% - 12px);
        }
      }
    }
  }

  /* COMFORT SECTION */

  .comfort {
    background-image: url("https://allegro.stati.pl/AllegroIMG/PRODUCENCI/KIVI/720QB/img/comfort-mob.jpg");
    background-repeat: no-repeat;
    background-position: 50% 0%;
    background-size: contain;
    margin-top: -20px;
    padding-bottom: 0;

    @container rich-container (min-width: 560px) {
      background-image: url("https://allegro.stati.pl/AllegroIMG/PRODUCENCI/KIVI/720QB/img/comfort-tab.jpg");
      background-size: cover;
      aspect-ratio: 960/1351;
    }

    .comfort-info {
      display: flex;
      flex-direction: column;

      @container rich-container (min-width: 560px) {
        gap: 42px;
        padding-top: 70%;
        padding-left: 10%;
        padding-bottom: 10%;
      }

      @container rich-container (min-width: 760px) {
        gap: 28px;
        padding-left: 5%;
      }

      @container rich-container (min-width: 960px) {
        gap: 84px;
        padding-left: 8%;
      }

      @container rich-container (min-width: 1240px) {
        padding-left: 12%;
      }
    }

    .comfort-title {
      max-width: 300px;
      margin-bottom: 105%;

      @container rich-container (min-width: 460px) {
        margin-bottom: 115%;
      }

      @container rich-container (min-width: 560px) {
        margin-bottom: 0;
        max-width: 500px;
      }

      @container rich-container (min-width: 760px) {
        max-width: 700px;
      }
    }

    .comfort-text {
      max-width: 710px;

      @container rich-container (min-width: 560px) {
        color: var(--white-color);
        line-height: 1.6;
      }
    }
  }

  /* MODES SECTION */

  .modes {
    .modes-title {
      text-align: center;
      margin-bottom: 54px;
      max-width: 400px;
      margin-left: auto;
      margin-right: auto;

      @container rich-container (min-width: 760px) {
        margin-bottom: 84px;
        max-width: 800px;
      }

      @container rich-container (min-width: 960px) {
        gap: 114px;
        max-width: 100%;
      }
    }

    .modes-list {
      display: flex;
      flex-direction: column;
      gap: 54px;
      max-width: 360px;
      margin: 0 auto;

      @container rich-container (min-width: 560px) {
        max-width: 800px;
      }

      @container rich-container (min-width: 760px) {
        gap: 84px;
      }

      @container rich-container (min-width: 960px) {
        flex-direction: row;
        gap: 24px;
        max-width: 100%;
      }

      .modes-list-item {
        display: flex;
        flex-direction: column;
        gap: 24px;

        @container rich-container (min-width: 760px) {
          gap: 54px;
        }

        @container rich-container (min-width: 960px) {
          flex: 1 1 calc((100% - (2 * 24px)) / 3);
        }

        .modes-info-wrap {
          display: flex;
          flex-direction: column;
          gap: 24px;

          @container rich-container (min-width: 760px) {
            gap: 34px;
          }
        }
      }
    }
  }

  /* GOOGLE SECTION */

  .google {
    background-image: url("https://allegro.stati.pl/AllegroIMG/PRODUCENCI/KIVI/720QB/img/google-mob.jpg");
    background-repeat: no-repeat;
    background-position: 50% 0%;
    background-size: contain;
    margin-top: -20px;
    padding-top: 100%;

    @container rich-container (min-width: 560px) {
      background-image: url("https://allegro.stati.pl/AllegroIMG/PRODUCENCI/KIVI/720QB/img/google-tab.jpg");
      padding-top: 90%;
    }

    .google-list {
      display: flex;
      flex-direction: column;
      gap: 54px;
      padding: 0 16px;

      @container rich-container (min-width: 760px) {
        gap: 84px;
        padding: 0 30px;
      }

      @container rich-container (min-width: 960px) {
        flex-direction: row;
        gap: 24px;
        padding: 0 30px;
      }

      .google-list-item {
        display: flex;
        flex-direction: column;
        gap: 24px;

        @container rich-container (min-width: 760px) {
          gap: 34px;
        }

        @container rich-container (min-width: 960px) {
          flex: 1 1 calc((100% - (2 * 24px)) / 3);
        }

        .google-tv-wrap {
          padding: 7px 0;
          max-width: 178px;

          @container rich-container (min-width: 760px) {
            padding: 12px 0;
            max-width: 307px;
          }

          @container rich-container (min-width: 760px) {
            height: 81px;
          }
        }

        .google-cast-wrap {
          padding: 7px 0;
          max-width: 207px;

          @container rich-container (min-width: 760px) {
            padding: 12px 0;
            max-width: 357px;
          }

          @container rich-container (min-width: 760px) {
            height: 81px;
          }
        }

        .google-assistant-wrap {
          padding: 7px 0;
          max-width: 263px;

          @container rich-container (min-width: 760px) {
            padding: 12px 0;
            max-width: 453px;
          }

          @container rich-container (min-width: 760px) {
            height: 81px;
          }
        }
      }
    }
  }

  /* REMOTE SECTION */

  .remote {
    background-color: #46475c;

    .remote-container {
      display: flex;
      flex-direction: column;
      gap: 54px;
      position: relative;

      @container rich-container (min-width: 760px) {
        gap: 84px;
      }

      @container rich-container (min-width: 960px) {
        gap: 24px;
        flex-direction: row;
      }

      .remote-title-mob {
        max-width: 400px;

        @container rich-container (min-width: 760px) {
          position: absolute;
          right: 0;
          top: 0;
          text-align: right;
          max-width: 600px;
        }

        @container rich-container (min-width: 960px) {
          display: none;
        }
      }

      .remote-image {
        max-width: 95%;

        @container rich-container (min-width: 760px) {
          max-width: 700px;
        }

        @container rich-container (min-width: 960px) {
          flex: 1 1 calc(50% - 12px);
          max-width: 95%;
        }
      }

      .remote-info {
        display: flex;
        flex-direction: column;

        @container rich-container (min-width: 960px) {
          flex: 1 1 calc(50% - 12px);
        }

        .remote-title-web {
          margin-bottom: 84px;

          @container rich-container (max-width: 1279px) {
            display: none;
          }
        }

        .remote-info-list {
          padding-left: 11px;
          margin-bottom: 54px;

          @container rich-container (min-width: 960px) {
            margin-bottom: auto;
          }

          .remote-info-item {
            display: flex;
            gap: 10px;
            color: var(--white-color);
            line-height: 1.6;

            &::before {
              content: "";
              flex-shrink: 0;
              display: block;
              width: 4px;
              height: 4px;
              margin-top: 11px;
              border-radius: 50%;
              background-color: var(--white-color);

              @container rich-container (min-width: 760px) {
                margin-top: 16px;
              }

              @container rich-container (min-width: 960px) {
                margin-top: 24px;
              }
            }
          }
        }
        .remote-info-text {
          font-weight: 400;
          font-size: 15px;
          line-height: 1.45;
          color: #c5cadc;

          @container rich-container (min-width: 760px) {
            font-size: 24px;
          }
        }
      }
    }
  }
}