.template-section-light {
  color: var(--color-nero);
  position: relative;
}

.template-section-light a {
  color: var(--color-nero);
}

.template-section-light a:hover {
  color: var(--color-koromiko);
}

.template-section-dark {
  background-color: var(--color-midnight);
  color: var(--color-white);
  overflow: hidden;
  position: relative;
}

.template-container {
  max-width: 1440px;
  margin: 0 auto;
}

.template-lateral-background-container {
  max-width: 1440px;
  margin: 0 auto;
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  display: flex;
  height: 100%;
}

.template-full-width-background-container {
  width: 100%;
  margin: 0 auto;
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  display: flex;
  height: 100%;
}

.template-lateral-background-container-image {
  height: 100%;
  background-repeat: no-repeat;
  overflow: hidden;
  position: absolute;
  right: 0;
  top: 0;
}

.template-content {
  margin: 7% 0;
  padding: 0 10%;
  position: relative;
}

.template-background-content {
  padding: 7% 10%;
}

.template-two-columns {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.template-two-columns-align-start {
  align-items: start;
}

.template-two-columns-reverse {
  flex-direction: row-reverse;
}

.template-column-text-wrapper {
  display: flex;
  flex-direction: column;
  width: 45%;
}

.template-column-wide {
  width: 50%;
}

.template-column-text-title {
  font-family: var(--font-Futura-Cyrillic-Demi);
  font-size: 36px;
  line-height: 120%;
  padding: 0;
  margin: 0 0 28px 0;
  font-weight: 500;
}

.template-column-text-description {
  font-family: var(--font-roboto-regular);
  font-size: 24px;
  line-height: 145%;
  margin: 0;
  padding: 0;
}
.template-column-text-description-small {
  font-size: 18px;
}

.template-column-text-description-extra-small {
  font-size: 14px;
}

.template-column-text-description > p:first-child {
  margin-top: 0;
}

.template-column-text-description ul {
  list-style: disc;
  padding-left: 40px;
  margin: 0;
}

.template-column-text-description li {
  margin: 0 0 0.35em 0;
}

.template-column-text-description a {
  text-decoration: underline;
}

.template-column-text-description-small ul {
  padding-left: 24px;
}

.template-column-image-wrapper {
  display: flex;
  justify-content: start;
  width: 45%;
}

.template-two-columns-reverse .template-column-image-wrapper {
  justify-content: end;
}

.template-column-image,
.template-top-image {
  height: auto;
  width: 100%;
  max-width: 480px;
  align-self: center;
  aspect-ratio: 1/1;
  object-fit: cover;
}

.template-top-image {
  display: none;
  margin: 5% 0;
}

.template-column-spoiler-wrapper {
  display: flex;
  flex-direction: column;
  width: 50%;
  min-height: 300px;
  color: var(--color-black-dark);
}

.template-column-spoiler-wrapper-dark {
  color: var(--color-white);
}

.template-spoiler-description ul {
  list-style: disc;
  padding-left: 18px;
}

.template-spoiler-checkbox-container {
  display: flex;
  align-items: center;
  gap: 15px;
}

.template-spoiler-checkbox-container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  appearance: none;
}

.template-spoiler-checkbox-container h3 {
  width: 100%;
  margin: 0;
}

.template-spoiler-checkbox {
  width: 32px;
  height: 32px;
  min-width: 32px;
  min-height: 32px;
  border-radius: 50%;
  background-color: var(--color-platinum);
  background-image: url(../../../images/ui-line-icons/arrow-accordion-down-dark.svg);
  background-position: center;
  background-repeat: no-repeat;
  cursor: pointer;
  transition-duration: 0.5s;
}

.template-spoiler-number {
  width: 36px;
  height: 36px;
  min-width: 36px;
  min-height: 36px;
  border-radius: 50%;
  background-color: var(--color-platinum);
  position: relative;
  font-size: 16px;
  font-weight: 600;
}

.template-spoiler-number::after {
  position: absolute;
  color: var(--color-black-dark);
  content: attr(data-index);
  top: 10px;
  left: 14px;
}
.template-column-spoiler-wrapper-numbers {
  margin-bottom: 15px;
}
.template-column-spoiler-wrapper-dark .template-spoiler-checkbox {
  background-color: var(--color-very-dark-blue);
  background-image: url(../../../images/ui-line-icons/arrow-accordion-down.svg);
}

.template-column-spoiler-wrapper-dark .template-spoiler-number {
  background: var(--color-very-dark-blue);
}
.template-column-spoiler-wrapper-dark .template-spoiler-number::after {
  color: var(--color-white);
}
.template-column-spoiler-wrapper-dark
.template-spoiler-checkbox-container input:checked
~ .template-spoiler-number::after {
  color: var(--color-black-dark);
}
.template-column-spoiler-wrapper-dark
.template-spoiler-checkbox-container
input:checked
~ .template-spoiler-number {
  background-color: var(--color-platinum);
}

.template-spoiler-checkbox-container
  input:checked
  ~ .template-spoiler-checkbox {
  transform: rotate(180deg);
}

.template-column-spoiler-wrapper-dark
  .template-spoiler-checkbox-container
  input:checked
  ~ .template-spoiler-checkbox {
  background-image: url(../../../images/ui-line-icons/arrow-accordion-down-dark.svg);
  background-color: var(--color-white);
}

.template-spoiler-title {
  transition: 0.2s ease-in-out;
  font-family: var(--font-roboto-bold);
  font-size: 21px;
  line-height: 130%;
  margin-top: 10px;
  margin-bottom: 11px;
}

.template-spoiler-title > * {
  margin: 0;
  font-size: inherit;
}

.template-spoiler-description {
  transform: none;
  opacity: 1;
  overflow: hidden;
  transition: height 0.3s ease-out;
  height: auto;
  visibility: visible;
  width: 100%;
  padding-left: 50px;
  background: none;
  box-shadow: none;
}

.template-spoiler-description-text {
  font-family: var(--font-roboto-light);
  font-size: 16px;
  line-height: 145%;
  margin: 0 0 4% 0;
}

.template-spoiler-description-text a {
  text-decoration: underline;
}

.template-mobile-background-img,
.template-mobile-card-img {
  display: none;
}

.template-tabs {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  backdrop-filter: blur(12.5px);
  border-radius: 59px;
  padding: 1.5% 3.4%;
  flex-wrap: wrap;
  max-width: 85%;
  width: max-content;
  position: absolute;
  bottom: max(-7vw, -101px);
  margin-bottom: 2.5%;
  left: 50%;
  gap: 17px;
  transform: translate(-50%, 0%);
}

.template-tabs-light {
  background-color: var(--color-edge-of-down);
  opacity: 0.81;
  box-shadow: 0px 4px 11px rgba(0, 0, 0, 0.25);
}

.template-tabs-dark {
  background-color: var(--color-dark-cerulean-a30);
}

.template-tabs-spoiler-light{
  background-color: rgba(224,228,234,0.3);
}

.color-startos {
  background-color: var(--color-stratos);
}

.template-wide-tablet-column-text-title {
  display: none;
}

.hide-on-wide-tablet {
  display: block;
}
.template-specifications-content-padding {
  padding: 7% 10%;
}

.template-specification-title {
  color: var(--color-white);
}

@media (min-width: 1280px) {
  .template-column-text-title-large {
    font-size: 58px;
    margin-bottom: 45px;
  }
}

@media (max-width: 1023.98px) {
  .template-column-text-description {
    font-size: 18px;
  }
  .template-column-text-description-small {
    font-size: 16px;
  }
  .template-column-text-description-extra-small {
    font-size: 14px;
  }
  .template-column-text-description ul {
    padding-left: 24px;
  }
  .template-column-text-description-small ul {
    padding-left: 18px;
  }
  .template-spoiler-title {
    font-size: 16px;
  }
  .template-spoiler-description-text {
    font-size: 14px;
  }
  .hide-on-wide-tablet {
    display: none;
  }
}

@media (min-width: 768px) and (max-width: 1023.98px) {
  .template-two-columns:has(.template-column-image-wrapper)
    .template-column-spoiler-wrapper,
  .template-two-columns:has(.template-column-image-wrapper)
    .template-column-text-wrapper,
  .template-two-columns:has(.template-column-image-wrapper)
    .template-column-wide {
    width: 56%;
  }

  .template-column-image-wrapper {
    width: 36%;
  }

  .template-wide-tablet-column-text-title {
    display: block;
    line-height: 120%;
    margin-bottom: 48px;
  }

  .template-two-columns-align-start-tablet {
    align-items: flex-start;
  }
}

@media (max-width: 767.98px) {
  .template-content {
    padding: 0 5%;
    margin: 10% 0;
  }

  .template-background-content {
    padding: 7% 5%;
  }
  
  .template-lateral-background-container {
    display: none;
  }

  .template-full-width-background-container {
    display: none;
  }

  .template-two-columns {
    flex-direction: column;
  }
  .template-specification-title {
    color: var(--color-nero);
  }
  .template-column-text-description-small {
    font-size: 14px;
  }
  .template-column-text-description-extra-small {
    font-size: 14px;
  }

  .template-tabs,
  .template-column-text-wrapper,
  .template-column-image-wrapper,
  .template-column-spoiler-wrapper,
  .template-column-wide {
    width: 100%;
  }

  .template-column-spoiler-wrapper {
    min-height: unset;
  }

  .template-spoiler-checkbox {
    width: 25px;
    height: 25px;
    min-width: 25px;
    min-height: 25px;
  }

  .template-column-text-title {
    margin-top: 28px;
    font-size: 32px;
  }

  .hide-on-wide-tablet {
    display: block;
  }

  .template-mobile-background-img{
    display: flex;
    align-items: center;
    padding: 4% 7%;
    background-size: cover;
    background-repeat: no-repeat;
    max-width: 100%;
    height: 275px;
    max-height: 275px;
  }

  .template-column-image,
  .template-top-image {
    display: block;
    max-width: 100%;
    max-height: 275px;
    object-fit: cover;
  }

  .template-content:has(> .template-top-image) .template-column-image-wrapper {
    display: none;
  }

  .template-spoiler-description {
    padding-left: 0;
  }
  .template-spoiler-description-text {
    margin: 2% 0;
  }

  .template-mobile-card-img {
    display: block;
    width: 100%;
    max-height: 275px;
    min-height: 275px;
    object-fit: cover;
  }

  .template-tabs {
    position: static;
    transform: none;
    flex-wrap: wrap;
    backdrop-filter: none;
    background-color: transparent;
    margin: 7% 0;
    padding: 0;
    justify-content: start;
    max-width: 100%;
    gap: 13px;
  }
  .template-specifications-content-padding {
    padding: 0 5%;
  }
}