#spaces-content {
    --space-padding: 100px; /* Между слайдами. Так же задано в const swiper! */
    --slide-height: 600px; /* Высота слайда */
    --img-height: 200px; /* Высота картинки на слайде */
    --slide-padding-vertical: 46px; /* Отступ сверху и снизу у слайда, что бы можно было увеличивать при наведении */
    --border: 12px; /* Закругление на слайдах */
    --padding-content: 12px; /* Отступ у контента (описания и заголовка) */
    --slide-scale: 1.05; /* На сколько увеличивается при наведении (1 - нормальное состояние) */
    --padding-items: 8px; /* Между пунктами отступы */
    --parallax-overlay-alpha: 0.5; /* Полупрозрачность у блока с картинкой и кнопкой (0..1) */
    --height-parallax: 200px; /* Высота блока с картинкой */
    --height-parallax-mobile: 150px; /* Высота блока с картинкой НА ТЕЛЕФОНАХ */
}

.swiper-container {
    width: calc(100% - var(--space-padding) * 2);
    height: var(--slide-height);
    position: relative;
}

.spaces-wrapper {
    height: calc(var(--slide-height) + var(--slide-padding-vertical));
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}

.swiper-slide {
    height: var(--slide-height);
    background-color: white;
    color: white;
    border-radius: var(--border);
    display: flex;
    flex-direction: column;
    transition: transform var(--animation-speed) ease, border-radius var(--animation-speed) ease;
}

.swiper-slide:hover {
    transform: scale(var(--slide-scale));
    box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.2);
}

.space-img img {
    width: 100%;
    height: var(--img-height);
    object-fit: cover;
    border-radius: var(--border) var(--border) 0 0;
}

.swiper-button-next {
    position: absolute;
    right: -80px;
    color: black
}

.swiper-button-prev {
    position: absolute;
    left: -80px;
    color: black
}

.slide-title,
.slide-description {
    color: black;
}

.slide-title {
    height: 50px;
}

.slide-description ul {
    color: var(--main-color);
    padding-left: var(--padding-content);
    list-style: none;
}

.slide-description ul li {
    color: black;
    position: relative;
    padding-left: 20px; 
    padding-bottom: var(--padding-items);
}

.slide-description li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 10px;
    transform: translateY(-50%);
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: var(--main-color);
}

.slide-divider {
    background-color: var(--main-color);
    width: 150px;
    height: 2px;
}

.slide-content {
    height: 100%;
    border-radius: 0 0 var(--border) var(--border);
    padding: var(--padding-content);
    display: flex;
    flex-direction: column;
    gap: var(--padding-content);
}

@media (max-width: 768px) {
    .swiper-button-next,
    .swiper-button-prev {
        display: none;
    }

    .swiper-container {
        width: 100%;
    }
}

.parallax-button {
    color: white;
    z-index: 4;
    transition: transform var(--animation-speed) ease-in-out;
    text-decoration: none;
}

.parallax-container-button {
    position: relative;
    width: 100%;
    height: var(--height-parallax);
    background-image: url('/assets/images/parallax.jpg');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    display: flex;
    justify-content: center;
    align-items: center;
}

.parallax-container-button:hover .parallax-button {
    transform: scale(var(--slide-scale));
}

.parallax-container-button::after {
    content: '';
    position: absolute;
    background-color: rgba(0, 0, 0, var(--parallax-overlay-alpha));
    width: 100%;
    height: var(--height-parallax);
    top: 0;
    left: 0;
    z-index: 3;
}

@media (max-width: 768px) {
    .parallax-button {
        font-size: var(--medium-text) !important;
    }

    .parallax-container-button {
        height: var(--height-parallax-mobile);
    }

    .parallax-container-button::after {
        height: var(--height-parallax-mobile);
    }
}