/* Apartaments cover slider */
#sliderApartaments {
    scroll-snap-type: x mandatory;
    /* scroll-behavior: smooth; */
    overflow: auto;
    display: flex;
}

#sliderApartaments .apartamentCard {
    flex: none;
    width: 80vw;
    margin-right: var(--size-6);
    scroll-snap-align: center;
    transition: opacity .3s ease-in-out;
}

#sliderApartaments .apartamentCard:not(.is--active) {
    opacity: .4;
}

#sliderApartaments .apartamentCard:first-child {
    margin-left: var(--size-6);
}

#sliderApartaments .apartamentCard:last-child {
    margin-right: var(--size-6);
}

#sliderApartaments .sliderApartaments__arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    display: none;
    padding: 0;
    border-radius: 0;
    background-color: transparent;
    margin: 0;
}

#sliderApartaments__left {
    left: 0;
}

#sliderApartaments__right {
    right: 0;
}

#sliderApartaments .sliderApartaments__arrow .arrow__bg {
    fill: #fff;
    transition: fill .3s ease-out;
}

#sliderApartaments .sliderApartaments__arrow .arrow__icon {
    fill: var(--primary);
    transition: fill .3s ease-out;
}

#sliderApartaments .sliderApartaments__arrow::after {
    display: none;
}

#sliderApartaments .sliderApartaments__arrow:hover .arrow__bg {
    fill: var(--primary);
}

#sliderApartaments .sliderApartaments__arrow:hover .arrow__icon {
    fill: #fff;
}

.sliderApartaments__bullets {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: var(--size-7);
}

.sliderApartaments__bullets ul {
    --cols: 6;
    list-style: none;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(var(--cols), 1fr)
}

.sliderApartaments__bullets li {
    margin-bottom: 0 !important;
}

.sliderApartaments__bullet {
    --ring-size: var(--size-4);
    width: var(--ring-size) !important;
    height: var(--ring-size) !important;
    border-radius: var(--rounded-full);
    padding: 0;
    background-color: #fff;
    transition: background-color .5s ease-in-out;
    margin: 0;
    position: relative;
    overflow: visible;
    display: block;
}

.sliderApartaments__bullet::before {
    content: "";
    width: calc(var(--ring-size) * 1.5);
    height: calc(var(--ring-size) * 1.5);
    border: 1px solid var(--secondary);
    position: absolute;
    transform: translateY(-50%) translateX(-50%);
    left: 50%;
    transform-origin: center;
    top: 50%;
    transition: all .3s ease-out;
    border-radius: var(--rounded-full);
    z-index: -1;
    opacity: 0;
}

.sliderApartaments__bullet.is--active {
    background-color: var(--secondary);
}

.sliderApartaments__bullet.is--active::before {
    width: calc(var(--ring-size) * 2.5);
    height: calc(var(--ring-size) * 2.5);
    opacity: 1;
}

.sliderApartaments__bullets li:not(:last-child) .sliderApartaments__bullet {
    margin-right: var(--size-6);
}

.sliderApartaments__bullets__line {
    width: var(--size-8);
    background-color: var(--secondary);
    height: 1px;
    margin-left: var(--size-6);
}

.sliderApartaments__bullets__number {
    font-weight: bold;
    font-size: var(--text-md);
    color: var(--secondary);
    margin-left: var(--size-6);
}

@media only screen and (min-width: 768px) {
    #sliderApartaments .apartamentCard {
        width: 70vw;
        margin-right: var(--size-8);
    }

    #sliderApartaments .apartamentCard:first-child {
        margin-left: var(--size-8);
    }
}

@media only screen and (orientation: landscape) and (min-width: 992px) {
    #sliderApartaments {
        overflow: hidden;
    }

    #sliderApartaments .apartamentCard {
        width: 85vw;
        margin-right: var(--size-12);
    }

    #sliderApartaments .sliderApartaments__arrow {
        display: flex;
    }
}

@media only screen and (min-width: 1366px) {
    #sliderApartaments .apartamentCard:first-child {
        margin-left: 10vw;
    }

    .sliderApartaments__bullets ul {
        display: flex;
        align-items: center;
    }
}

@media only screen and (min-width: 1920px) {
    #sliderApartaments .apartamentCard {
        width: 70vw;
        margin-right: var(--size-12);
    }
}