.project-page .page-head__container {
  padding-top: 134px;
  padding-bottom: 60px;
  display: grid;
  grid-template-columns: 2fr;
  gap: 10px;
  @media (min-width: 1280px) {
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    padding-top: 184px;
  }
  @media (min-width: 1900px) {
    padding-top: 204px;
    padding-bottom: 97px;
    gap: 40px;
  }
}

.project-page .page-head__description {
  @media (min-width: 1280px) {
    padding-bottom: 60px;
  }
}

.project-page .hero-section__factoid {
  color: white;
  @media (min-width: 1280px) {
    color: var(--color-accent);
  }
}

.project-page__slider img,
.project-page__slider video {
  width: 100%;
  height: 100%;
  aspect-ratio: 830/580;
  -o-object-fit: contain;
  object-fit: contain;
}

.project-page__slider-thumbs .project-page__video {
  -o-object-fit: cover;
  object-fit: cover;
}

.project-page__video {
  position: relative;
  width: 100%;
  height: 100%;
}

.project-page__video::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 48px;
  height: 48px;
  transform: translate(-50%, -50%);
  border-radius: var(--b-radius);
  background: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(1.149999976158142px);
  z-index: 1;
  pointer-events: none;
}

.project-page__video::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 24px;
  height: 24px;
  transform: translate(-50%, -50%);
  background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_4295_451658)'%3E%3Cpath d='M7 8.48207C7 6.93549 7 6.16219 7.50194 5.87389C8.00388 5.5856 8.67183 5.97524 10.0077 6.75452L16.0385 10.2724C17.3564 11.0412 18.0154 11.4256 18.0154 12C18.0154 12.5744 17.3564 12.9588 16.0385 13.7276L10.0077 17.2455C8.67183 18.0248 8.00388 18.4144 7.50194 18.1261C7 17.8378 7 17.0645 7 15.5179V8.48207Z' stroke='%230A0F16' stroke-linejoin='round'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_4295_451658'%3E%3Crect width='18' height='18' fill='white' transform='translate(3 3)'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  z-index: 2;
  pointer-events: none;
}

.project-page__slider-thumbs-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.project-page__slider-counter {
  font-family: "Audiowide", sans-serif;
  font-size: 32px;
  line-height: 40px;
  color: white;
  display: flex;
  align-items: center;
  gap: 8px;
}

.project-page__slider-counter-current {
  color: var(--color-bg-sec-2);
  @media (min-width: 768px) {
    color: var(--color-accent);
  }
}

.project-page__slider-thumbs {
  width: 100%;
  overflow: hidden;
  user-select: none;
  padding: 0 var(--page-margin);
  margin: 0 calc(var(--page-margin) * -1);
  width: calc(100% + var(--page-margin) * 2);
  @media (min-width: 1280px) {
    width: 100%;
    padding: 0;
    margin: 0;
  }
}

.project-page__slider-thumbs .swiper-slide {
  aspect-ratio: 1/1;
  border-radius: var(--b-radius);
  cursor: pointer;
  z-index: 2;
  overflow: hidden;
  outline: 3px solid transparent;
  background: rgba(255, 255, 255, 0.27);
  padding: 3px;
}

.project-page__slider-thumbs .swiper-slide-thumb-active {
  outline: 3px solid white;
  outline-offset: -3px;
}

.project-page__slider-thumbs img,
.project-page__slider-thumbs video {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
  object-fit: contain;
  z-index: -1;
}

.swiper-buttons.project-page__slider-buttons {
  padding: 0;
  display: flex;
  gap: 8px;
}

.project-page__slider-buttons .swiper-button {
  height: 40px;
  width: 54px;
  background: white;
}

.project-page__slider-buttons .swiper-button::after {
  filter: brightness(0);
}

.project-page__slider-buttons .swiper-button:hover::after {
  filter: none;
}

.project-page__info {
  grid-column: 1 / -1;
  @media (min-width: 768px) {
    grid-column: span 2;
    padding-left: 40px;
  }
}

.project-page__preview-text {
  margin-top: 30px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.project-page__scopes {
  margin-top: 40px;
}

.project-page__scopes-title {
  text-transform: uppercase;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.28571;
}

.project-page__scopes-list {
  font-size: 14px;
  line-height: 1.28571;
  margin: 20px 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 9px;
}

.project-page__scopes-item {
  padding: 5px 11px;
  border-radius: var(--b-radius);
  border: 1px solid rgba(230, 245, 241, 0.6);
  background: rgba(235, 249, 248, 0.6);
  backdrop-filter: blur(4.050000190734863px);
}

.product-info__block {
  grid-column: span 2;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.product-info__head {
  grid-column: 1 / -1;
  padding-bottom: 16px;
  border-bottom: 2px var(--color-border) solid;
  color: var(--color-accent);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.28571;
  text-transform: uppercase;
}

.product-info__caption {
  color: var(--color-gray-1);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.28571;
  text-transform: uppercase;
}

.product-info__content {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.product-info__options {
  margin-top: 24px;
}

.product-info__list {
  margin-top: 16px;
}

.product-info__params-item {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  border-bottom: 2px dashed var(--color-border);
  padding: 10px 0;
  @media (min-width: 768px) {
    grid-template-columns: 1fr 1fr;
    gap: 20px;
  }
}

.product-info__params-item:last-child {
  border-bottom: none;
}

.product-info__detail-text {
  grid-column: 1 / -1;
  @media (min-width: 768px) {
    grid-column: 2 / 4;
  }
}

.product-info__params-sublist {
  padding-left: 20px;
  list-style: disc;
}

@media (max-width: 768px) {
  .product-info__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
  }
  .product-info__head::after {
    content: "";
    display: inline-block;
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 16L6 8H18L12 16Z' fill='%2331c4b4'/%3E%3C/svg%3E%0A");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    cursor: pointer;
  }
  .product-info__head.active::after {
    transform: rotate(180deg);
  }
  .product-info__content.text,
  .product-info__params,
  .product-info__detail-text.text {
    display: none;
  }
  .product-info__block:has(.product-info__head.active)
    .product-info__content.text,
  .product-info:has(> .product-info__head.active)
    .product-info__detail-text.text {
    display: flex;
  }
  .product-info__block:has(.product-info__head.active) .product-info__params {
    display: block;
  }
}

.product-section__plate {
  width: calc(100% - var(--page-margin) * 2);
  max-width: var(--max-width);
  padding: 14px 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  justify-content: space-between;
  align-items: center;
  background: rgb(12 44 80 / 85%);
  border-radius: var(--b-radius);
  @media (min-width: 768px) {
    padding: 14px 30px;
    flex-direction: row;
  }
}
.product-section__plate.fixed-bottom {
  position: fixed;
  bottom: var(--space-lg);
  left: 50%;
  transform: translateX(-50%);
  z-index: 800;
  max-width: var(--max-width);
}
.product-section__plate-title {
  max-width: 400px;
  color: white;
  font-family: "Exo 2", sans-serif;
  font-weight: 600;
  font-size: 18px;
  line-height: 1.11111;
  overflow-wrap: break-word;
  @media (min-width: 1280px) {
    font-size: 22px;
    line-height: 1.0909;
  }
}
.product-section__tabs {
  display: none;
  @media (min-width: 1280px) {
    width: 600px;
    display: flex;
    align-items: center;
    gap: 20px;
    justify-self: center;
  }
}
.product-section__tab {
  color: white;
  font-size: 14px;

  font-weight: 600;
  text-transform: uppercase;
  line-height: 18px;
  overflow-wrap: break-word;
}
.product-section__tab.active {
  color: var(--color-accent);
}
.product-section__divider {
  display: none;
  flex: 1 1 0;
  border: 2px dashed var(--color-border);
}
.product-section__tab + .product-section__divider {
  display: block;
}
.product-section__actions {
  display: flex;
  align-items: center;
  gap: 10px;
  @media (min-width: 420px) {
    gap: 20px;
  }
  @media (min-width: 768px) {
    gap: 30px;
  }
  @media (min-width: 1024px) {
    justify-self: end;
  }
}
.product-section__download {
  display: flex;
  align-items: center;
  gap: 10px;
  color: white;
  font-size: 14px;
  line-height: 18px;
  overflow-wrap: break-word;
}
.product-section__download span:nth-child(1) {
  padding-bottom: 2px;
  display: flex;
  gap: 10px;
  border-bottom: 2px solid rgb(49 196 180 / 60%);
}
.product-section__download-icon {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-gray-7);
  border-radius: var(--b-radius);
  pointer-events: none;
}
.product-section__cta {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  height: 40px;
  padding: 0 5px;
  color: #312e2b;
  font-size: 16px;
  white-space: nowrap;
  line-height: 22px;
  overflow-wrap: break-word;
  background:
    radial-gradient(
      ellipse 111.49% 136.42% at 77.58% 50%,
      var(--color-teal-3) 0,
      var(--color-accent) 100%
    ),
    radial-gradient(
      ellipse 93.3% 169.17% at 35.43% 30.21%,
      var(--color-teal-3) 0,
      var(--color-accent) 100%
    );
  border-radius: 6px;
  border: none;
  cursor: pointer;
  @media (min-width: 768px) {
    padding: 0 20px;
  }
}