.rooms-slider .pre-headline {
    grid-area: 1/2/1/span 12;
}

.rooms-slider .headline {
    grid-area: 2/2/2/span 12;
}

.rooms-slider .text-container {
	grid-area: 3/2/3/span 12;
	max-width: 60ch;
}

.rooms-slider .rooms-slider-container {
    grid-area: 4/3/4/span 10;
    grid-template-columns: max(48px, 2.8125vw) minmax(0, 1fr) max(48px, 2.8125vw);
}

.rooms-slider .rooms-slider-container .rooms-slider {
    grid-area: 1/2/1/2;
    margin-right: calc(var(--grid-gap) * -1);
}

.rooms-slider .rooms-slider-container .rooms-slider .room-item {
    display: grid;
    margin-right: var(--grid-gap);
}

.rooms-slider .rooms-slider-container .rooms-slider .room-item .room-thumbnail {
    grid-area: 1/1/1/1;
    position: relative;
}

.rooms-slider .rooms-slider-container .rooms-slider .room-item .room-thumbnail::before {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: linear-gradient(0deg,rgba(29, 27, 25, .75) 0%, rgba(29, 27, 25, 0) 50%, rgba(29, 27, 25, 0) 100%);
    mix-blend-mode: multiply;
}

.rooms-slider .rooms-slider-container .rooms-slider .room-item .room-content {
    grid-area: 1/1/1/1;
    padding: var(--m-sm);
    gap: 12px;
    z-index: 2;
}

.rooms-slider .rooms-slider-container .rooms-slider .room-item .room-content .room-info .room-price:not(:last-child)::after {
    content: "|";
    margin: 0 .5ch;
}

.rooms-slider .rooms-slider-container .rooms-slider .room-item .arrow-btn {
    grid-area: 1/1/1/1;
    margin: var(--m-xs);
    z-index: 2;
}

.rooms-slider .rooms-slider-container .rooms-slider-nav {
    grid-area: 1/3/1/3;
}

.rooms-slider .rooms-slider-container .highlight-sm {
    grid-area: 1/1/1/span 2;
    z-index: 1;
    transform: rotate(-5deg);
}

.rooms-slider .btns-container {
    grid-area: 5/2/5/span 12;
}

@media (max-width: 1399.98px) {
    .rooms-slider .rooms-slider-container {
        grid-area: 4/2/4/span 12;
    }
}

@media (max-width: 767.98px) {
    .rooms-slider .rooms-slider-container {
        grid-template-columns: minmax(0, 1fr);
    }

    .rooms-slider .rooms-slider-container .rooms-slider {
        grid-area: 1/1/1/1;
    }

    .rooms-slider .rooms-slider-container .rooms-slider-nav {
        grid-area: 2/1/2/1;
        flex-direction: row-reverse;
        gap: var(--m-md);
        justify-self: center;
        margin-top: var(--m-sm);
    }

    .rooms-slider .btns-container {
        margin-top: var(--m-sm);
    }

    .rooms-slider .rooms-slider-container .highlight-sm {
        grid-area: 1/1/1/1;
        transform: rotate(-5deg) translate(-50%, -60%);
        margin-top: 0;
        left: 25%;
        position: relative;
    }

    .rooms-slider .rooms-slider-container {
        margin-top: var(--m-xl);
    }
}

@media (max-width: 575.98px) {
    .rooms-slider .rooms-slider-container .highlight-sm {
        transform: rotate(-5deg) translate(0%, -60%);
        left: unset;
        justify-self: center;
    }
}