.rooms .section-headlines-container {
    grid-area: 1/3/1/span 10;
}

.rooms .room-item {
    grid-column: 1/span 14;
}

.rooms .room-item:not(:last-child) {
    margin-bottom: var(--m-xl);
}

.rooms .room-item .room-gallery {
    grid-area: 1/3/span 4/span 5;
}

.rooms .room-item .circle-btn {
    grid-area: 1/3/span 4/span 5;
    z-index: 1;
    align-self: flex-end;
    transform: translate(-50%, 50%);
}

.rooms .room-item .gallery-slider-nav {
    grid-area: 1/8/span 4/8;
}

.rooms .room-item .room-title {
    grid-area: 2/9/2/span 3;
}

.rooms .room-item .room-text {
    grid-area: 3/9/3/span 3;
}

.rooms .room-item .room-text ul {
    line-height: 2.5;
}

.rooms .room-item .room-price {
    grid-area: 4/9/4/span 3;
}

.rooms .room-item .room-infos {
    grid-area: 2/12/span 2/span 2;
    gap: var(--m-sm);
    margin-bottom: max(32px, 3.59375vw);
}

.rooms .room-item .room-infos .room-info {
    display: flex;
    align-items: center;
    gap: var(--m-xs);
}

.rooms .room-item .room-infos .room-info::before {
    content: "";
    display: block;
    width: var(--m-sm);
    aspect-ratio: 1/1;
    background: currentColor;
}

.rooms .room-item .room-infos .room-info.persons::before {
    mask: url(../../img/icon-room-persons.svg) no-repeat center/contain;
    -webkit-mask: url(../../img/icon-room-persons.svg) no-repeat center/contain;
}

.rooms .room-item .room-infos .room-info.facilities::before {
    mask: url(../../img/icon-room-facilities.svg) no-repeat center/contain;
    -webkit-mask: url(../../img/icon-room-facilities.svg) no-repeat center/contain;
}

.rooms .room-item .room-infos .room-info.size::before {
    mask: url(../../img/icon-room-size.svg) no-repeat center/contain;
    -webkit-mask: url(../../img/icon-room-size.svg) no-repeat center/contain;
}

.rooms .room-item .btns-container {
    grid-area: 4/12/4/span 2;
    width: fit-content;
}

.rooms .room-item .btns-container .arrow-btn {
    width: 100%;
}

@media (max-width: 1199.98px) {
    .rooms .room-item .room-gallery {
        grid-area: 1/3/1/span 10;
        margin-bottom: var(--m-sm);
    }

    .rooms .room-item .room-title {
        grid-area: 2/3/2/span 5;
    }

    .rooms .room-item .room-text {
        grid-area: 3/3/3/span 5;
    }

    .rooms .room-item .room-price {
        grid-area: 4/3/4/span 5;
    }

    .rooms .room-item .room-infos {
        grid-area: 2/8/span 2/span 5;
        justify-self: flex-end;
    }

    .rooms .room-item .btns-container {
        grid-area: 4/8/4/span 5;
        justify-self: flex-end;
    }

    .rooms .room-item .gallery-slider-nav {
        grid-area: 1/3/1/span 10;
        z-index: 1;
        margin-bottom: calc(var(--m-sm) + var(--m-xs));
        margin-right: var(--m-xs);
        justify-self: flex-end;
        gap: var(--m-xs);
    }

    .rooms .room-item .gallery-slider-nav .default-slider-prev {
        mask: none;
        -webkit-mask: none;
        background-color: transparent;
        background: url(../../img/arrow-left-beige.svg) no-repeat center/contain;
    }

    .rooms .room-item .gallery-slider-nav .default-slider-next {
        mask: none;
        -webkit-mask: none;
        background-color: transparent;
        background: url(../../img/arrow-right-beige.svg) no-repeat center/contain;
    }

    .rooms .room-item .circle-btn {
        grid-area: 1/3/1/span 10;
        align-self: flex-start;
        transform: translateY(-50%);
        justify-self: center;
    }
}

@media (max-width: 767.98px) {
    .rooms .room-item .room-title {
        grid-area: 2/2/2/span 12;
        text-align: center;
    }

    .rooms .room-item .room-infos {
        grid-area: 3/2/3/span 12;
        justify-self: center;
        flex-direction: revert;
        margin-top: var(--m-sm);
    }

    .rooms .room-item .room-infos .room-info {
        flex-direction: column;
    }

    .rooms .room-item .room-text {
        grid-area: 4/3/4/span 10;
    }

    .rooms .room-item .room-price {
        grid-area: 5/3/5/span 5;
    }

    .rooms .room-item .btns-container {
        grid-area: 5/8/5/span 5;
    }
}

@media (max-width: 767.98px) {
    .rooms .room-item .room-title {
        grid-area: 2/2/2/span 12;
        text-align: center;
    }

    .rooms .room-item .room-infos {
        grid-area: 3/2/3/span 12;
        justify-self: center;
        margin-top: var(--m-sm);
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        text-align: center;
        gap: var(--m-xs);
    }

    .rooms .room-item .room-infos .room-info {
        flex-direction: column;
    }

    .rooms .room-item .room-text {
        grid-area: 4/3/4/span 10;
    }

    .rooms .room-item .room-price {
        grid-area: 5/3/5/span 5;
    }

    .rooms .room-item .btns-container {
        grid-area: 5/8/5/span 5;
    }
}

@media (max-width: 575.98px) {
    .rooms .section-headlines-container {
        grid-area: 1/2/1/span 12;
        margin-bottom: var(--m-lg);
    }

    .rooms .room-item .room-gallery {
        grid-area: 1/2/1/span 12;
    }

    .rooms .room-item .room-gallery .gallery-item {
        aspect-ratio: 334/508;
    }

    .rooms .room-item .gallery-slider-nav {
        grid-area: 1/2/1/span 12;
    }

    .rooms .room-item .room-text {
        grid-area: 4/2/4/span 12;
        margin-bottom: var(--m-md);
        margin-top: 0;
    }

    .rooms .room-item .room-price {
        grid-area: 5/2/5/span 6;
    }

    .rooms .room-item .btns-container {
        grid-area: 5/8/5/span 6;
    }
}