:root {
    --section-margin-y: var(--size-base);
    --text-leading: 1.6;
}

.is--onTop {
    z-index: 9999 !important;
}

.apartamentInfoModal {
    position: fixed;
    bottom: 0;
    width: 100vw;
    height: 100vh;
    z-index: 99;
    visibility: hidden;
    opacity: 0;
    left: 0;
}

.apartamentInfoModal::after {
    --width: 100%;
    content: url("data:image/svg+xml,%3Csvg width='163' height='56' viewBox='0 0 163 56' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M81.82 55.8198H81.825L83.319 55.8188H162.13C142.72 55.8188 130.6 41.2188 120.551 29.1128L120.55 29.1118C119.486 27.8247 118.414 26.5437 117.335 25.2688C116.338 24.0938 115.345 22.9151 114.357 21.7328C104.893 10.4348 96.298 0.174805 82.817 0.174805C82.488 0.174805 82.157 0.186805 81.822 0.211805C81.4906 0.187475 81.1583 0.175134 80.826 0.174805C67.346 0.174805 58.751 10.4348 49.287 21.7328C48.306 22.9028 47.316 24.0858 46.309 25.2688C45.257 26.5058 44.188 27.7948 43.093 29.1128C33.044 41.2188 20.923 55.8188 1.513 55.8188H81.82V55.8198Z' fill='%230E1929'/%3E%3Cpath d='M81.56 45.3399L75.935 39.0899C75.8645 39.0082 75.8257 38.9038 75.8257 38.7959C75.8257 38.688 75.8645 38.5836 75.935 38.5019C75.9679 38.4638 76.0085 38.4333 76.0543 38.4123C76.1 38.3914 76.1497 38.3805 76.2 38.3805C76.2503 38.3805 76.3 38.3914 76.3457 38.4123C76.3915 38.4333 76.4321 38.4638 76.465 38.5019L81.45 44.0399V25.8799C81.45 25.6499 81.618 25.4629 81.825 25.4629C82.032 25.4629 82.2 25.6489 82.2 25.8799V44.0399L87.185 38.5019C87.2179 38.4638 87.2585 38.4333 87.3043 38.4123C87.35 38.3914 87.3997 38.3805 87.45 38.3805C87.5003 38.3805 87.55 38.3914 87.5957 38.4123C87.6415 38.4333 87.6821 38.4638 87.715 38.5019C87.7866 38.583 87.8257 38.6877 87.825 38.7959C87.826 38.9044 87.7868 39.0095 87.715 39.0909L82.09 45.3409C82.0572 45.3791 82.0166 45.4098 81.9708 45.4309C81.9251 45.4519 81.8753 45.4628 81.825 45.4628C81.7746 45.4628 81.7249 45.4519 81.6792 45.4309C81.6334 45.4098 81.5928 45.3791 81.56 45.3409V45.3399Z' fill='white'/%3E%3C/svg%3E%0A");
    width: var(--width);
    bottom: 0;
    position: fixed;
    height: 3.4rem;
    z-index: 2;
    text-align: center;
    transform: translateY(100%);
    transition: transform .3s .3s ease-out;
}

.apartamentInfoModal__backdrop {
    width: 100%;
    height: 100%;
    background-color: var(--primary);
    opacity: 0;
    transition: opacity .5s ease-out;
}

.apartamentInfoModal__dialog {
    --height: 80vh;
    --width: 100%;
    --padding: var(--size-6);

    background-color: #fff;
    position: absolute;
    bottom: 0;
    height: var(--height);
    width: var(--width);
    z-index: 1;
    padding: var(--padding);
    overflow: auto;
    transform: translateY(1rem);
    opacity: 0;
    transition: transform .5s ease-out, opacity .3s ease-out;
}

.apartamentInfoModal.is--opened {
    visibility: visible;
    opacity: 1;
}

.apartamentInfoModal.is--opened::after {
    transform: translateY(0)
}

.apartamentInfoModal.is--opened .apartamentInfoModal__backdrop {
    opacity: .7;
}

.apartamentInfoModal.is--opened .apartamentInfoModal__dialog {
    opacity: 1;
    transform: translateY(0);
}

button.apartamentInfoModal__btn-close {
    position: absolute;
    right: 0;
    top: 0;
    box-shadow: var(--shadow);
    background-color: #fff;
    padding: var(--size-4);
    border-radius: 0;
    z-index: 1;
    color: var(--primary);
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.apartamentInfoModal__header-gallery {
    border-radius: var(--rounded-4);
    overflow: hidden;
    position: relative;
}

.apartamentInfoModal__header__img {
    display: flex;
    aspect-ratio: 16/10;
    max-height: 420px;
    width: 100%;
    background-color: var(--primary-light);
}

.apartamentInfoModal__header__img img {
    width: 100%;
    object-fit: cover;
}

button.apartamentInfoModal__header__btn-gallery {
    --padding: var(--size-4);
    --bot: var(--size-4);
    --left: var(--size-4);
    background-color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--rounded-2);
    color: var(--primary);
    padding: var(--padding);
    position: absolute;
    bottom: var(--bot);
    left: var(--left);
    margin: 0;
}

.apartamentInfoModal__header {
    display: flex;
    flex-flow: column nowrap;
    margin: var(--section-margin-y) 0;
}

.apartamentInfoModal__titles {
    display: flex;
    flex-flow: column wrap;
    padding: 0 var(--size-2);
}

.apartamentInfoModal__name {
    font-size: var(--text-xl);
    line-height: 1.2;
}

.apartamentInfoModal__subname {
    font-family: var(--font-primary);
}

button.apartamentInfoModal__btn-booking {
    --size: 100%;
    background-color: var(--secondary);
    font-size: var(--text-base);
    text-transform: uppercase;
    width: var(--size);
    margin: 0;
    font-weight: bold;
}

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

li.apartamentInfoModal__detail {
    --padding: var(--size-5) var(--size-2);
    display: flex;
    flex-flow: column nowrap;
    background-color: #F5F5F5;
    align-items: center;
    justify-content: space-around;
    border-radius: var(--rounded-4);
    padding: var(--padding);
    margin: 0 var(--size-3) var(--size-3) 0 !important;
    flex-grow: 1;
}

li.apartamentInfoModal__detail:last-child {
    flex-grow: 0;
}

.apartamentInfoModal__detail__icon {
    width: var(--size-8);
    margin-bottom: var(--size-2);
}

.apartamentInfoModal__detail__text {
    font-size: var(--text-xs);
    text-align: center;
    color: var(--primary);
    line-height: 1.2;
}

.apartamentInfoModal__description p {
    margin: var(--section-margin-y) 0;
    font-family: var(--font-primary);
    line-height: var(--text-leading);
    color: var(--text);
}

.apartamentInfoModal__gallery .gallery {
    --cols: 4;
    margin: 0;
    list-style: none;
    display: grid;
    grid-template-columns: repeat(var(--cols), 1fr);
}

.apartamentInfoModal__gallery .gallery-item {
    --margin: var(--size-3);
    width: 100% !important;
    float: none;
    margin-right: var(--margin);
    margin-bottom: var(--margin) !important;
    max-height: 8rem;
    display: flex;
    overflow: hidden;
    aspect-ratio: 16/10;
}

.apartamentInfoModal__gallery .gallery-item .gallery-icon {
    width: 100% !important;
    background-color: var(--secondary-light);
    border-radius: var(--rounded-2);
}

.apartamentInfoModal__gallery .gallery-item img {
    height: 100%;
    width: 100%;
    object-fit: cover;
    transition: filter 1s ease-in-out;
}

.apartamentInfoModal__services {
    margin: var(--section-margin-y) 0;
}

.apartamentInfoModal__section-title {
    font-size: var(--text-lg);
    line-height: 1.2;
    margin-top: var(--size-3);
}

.apartamentInfoModal__section-text {
    font-family: var(--font-primary);
    color: var(--text);
    line-height: var(--text-leading);
}

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

li.apartamentInfoModal__services-icon__item {
    --padding: var(--size-5) var(--size-2);
    display: flex;
    flex-flow: column nowrap;
    background-color: var(--secondary-light);
    align-items: center;
    justify-content: space-around;
    border-radius: var(--rounded-4);
    padding: var(--padding);
    margin: 0 var(--size-3) var(--size-3) 0 !important;
    flex-grow: 1;
}

.apartamentInfoModal__services-icon__icon {
    width: var(--size-8);
    margin-bottom: var(--size-2);
}

.apartamentInfoModal__services-icon__text {
    font-size: var(--text-xs);
    text-align: center;
    color: var(--primary);
    line-height: 1.2;
}

@media only screen and (min-width: 768px) {

    .apartamentInfoModal.is--opened .apartamentInfoModal__dialog {
        opacity: 1;
        transform: translateX(1rem) translateY(auto);
    }

    .apartamentInfoModal__dialog {
        transform: translateX(1rem);
    }

    .apartamentInfoModal::after {
        --width: clamp(700px, 70vw, 920px);
        width: var(--width);
        left: auto;
        right: 0;
    }

    .apartamentInfoModal__dialog {
        --height: 100%;
        --width: clamp(700px, 70vw, 920px);
        --padding: var(--size-8);
        left: auto;
        right: 0;
    }

    .apartamentInfoModal__header {
        flex-flow: row nowrap;
        align-items: flex-start;
        justify-content: space-between;
    }

    .apartamentInfoModal__titles {
        padding: 0 var(--size-8) 0 0;
        flex: 1;
    }

    button.apartamentInfoModal__btn-booking {
        --size: auto;
        font-size: var(--text-sm);
        white-space: nowrap;
        margin-top: var(--size-3);
    }

    ul.apartamentInfoModal__details {
        --cols: 5;
    }

    ul.apartamentInfoModal__gallery__list {
        --cols: 3;
    }

    ul.apartamentInfoModal__services-icon {
        --cols: 5;
    }
}

@media only screen and (min-width: 1024px) {
    .apartamentInfoModal__dialog {
        --padding: var(--size-10);
    }

    ul.apartamentInfoModal__details {
        --cols: 7;
    }

    .apartamentInfoModal__header-gallery {
        border-radius: var(--rounded-section);
    }

    button.apartamentInfoModal__header__btn-gallery {
        --bot: var(--size-6);
        --left: var(--size-6);
    }

    ul.apartamentInfoModal__gallery__list {
        --cols: 4;
    }

    .apartamentInfoModal__gallery {
        margin-top: var(--size-10);
    }

    .apartamentInfoModal__services {
        margin: var(--size-10) 0;
    }

    ul.apartamentInfoModal__services-icon {
        --cols: 7;
    }
}