.quartz-parquet {
    --bg-main: var(--color-body-bg-2, #1c1c1c);
    --bg-white: var(--background-light, #ffffff);
    --text-main: var(--color-black, #000000);
    --line-color: rgba(0, 0, 0, 0.15);

    --font-head: var(--font-h, sans-serif);
    --font-base: var(--font-geologica, sans-serif);

    --pad-bottom: max(40px, 4vw);
    --wrap-pt: max(90px, 6.25vw);

    --title-fz: max(24px, 1.875vw);
    --title-lh: 1.1;
    --title-mb: max(20px, 2vw);

    --room-icon-sz: max(18px, 1.2vw);
    --room-gap: max(6px, 0.5vw);
    --room-fz: max(9px, 0.6vw);
    --room-lh: 1.2;
    --rooms-mb: max(40px, 2.083vw);

    background-color: var(--bg-main);
    padding-bottom: var(--pad-bottom);
    position: relative;
    overflow: hidden;
    z-index: 1;
}

.quartz-parquet__bg-white {
    background-color: var(--bg-white);
}

.quartz-parquet__container {
    position: relative;
    width: 100%;
}

.quartz-parquet__grid {
    display: grid;
    grid-template-columns: clamp(102px, 25vw, 131px) 1fr;
    column-gap: 15px;
}

.quartz-parquet__head {
    grid-column: 1 / -1;
    grid-row: 1 / 2;
    padding: var(--wrap-pt) 15px 0;
}

.quartz-parquet__body {
    grid-column: 2 / 3;
    grid-row: 2 / 3;
    padding: 0 20px 30px 0;
}

.quartz-parquet__plank {
    grid-column: 1 / 2;
    grid-row: 2 / 4;
    position: relative;
    z-index: 5;
    margin-left: 10px;
    margin-bottom: calc((var(--pad-bottom) * -1) - max(15px, 0.781vw));
    filter: drop-shadow(4px 4px 15px rgba(0, 0, 0, 0.25));
}

.quartz-parquet__plank {
    transition: transform 0.4s ease-out, box-shadow 0.4s ease-out;
    transform-origin: center center;
}

.quartz-parquet__plank:hover {
    animation: gentle-tilt 2.5s ease-in-out infinite;
    box-shadow: 8px 12px 20px rgba(0, 0, 0, 0.1);
}

.quartz-parquet__plank-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    display: block;
}

.quartz-parquet__media {
    grid-column: 1 / -1;
    grid-row: 3 / 4;
    position: relative;
    z-index: 1;
    padding-left: clamp(102px, 23vw, 128px);
    overflow: hidden;
    /*margin-bottom: calc(var(--pad-bottom) * -1);*/
}

.quartz-parquet__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    object-position: center;
}

.quartz-parquet__title {
    margin: 0 0 var(--title-mb) 0;
}

.quartz-parquet__rooms {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: var(--rooms-mb);
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    width: 100%;
    padding-bottom: 2px;
}

.quartz-parquet__rooms::-webkit-scrollbar {
    display: none;
}

.quartz-parquet__room {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-shrink: 0;
    gap: var(--room-gap);
    text-align: center;
}

.quartz-parquet__room-icon {
    width: var(--room-icon-sz);
    height: var(--room-icon-sz);
    display: block;
    object-fit: contain;
}

.quartz-parquet__room-name {
    font-family: var(--font-base);
    font-size: var(--room-fz);
    line-height: var(--room-lh);
    font-weight: 400;
    color: var(--text-main);
    white-space: nowrap;
}

.quartz-parquet__desc {
    font-family: var(--font-base);
    font-size: max(16px, 1.042vw);
    margin: 0 0 max(25px, 3vw) 0;
    font-weight: 400;
    line-height: 1.35;
    color: var(--text-main);
    max-width: 40ch;
    display: flex;
    flex-direction: column;
    gap: max(20px, 1.042vw);
}

.quartz-parquet__desc strong {
    font-weight: 800;
}

.quartz-parquet__features {
    list-style: none;
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
}

.quartz-parquet__feature {
    position: relative;
    display: flex;
    align-items: center;
    gap: max(20px, 1.302vw);
    padding: max(12px, 0.885vw) 0;
    width: 100%;
}

.quartz-parquet__feature + .quartz-parquet__feature::before {
    content: "";
    position: absolute;
    top: 0;
    height: 1px;
    background-color: var(--line-color);
    z-index: 1;
    left: calc(50% - 50vw);
    width: 100vw;
}

.quartz-parquet__feature-icon {
    width: max(25px, 2vw);
    height: max(25px, 2vw);
    display: block;
    object-fit: contain;
    flex-shrink: 0;
    position: relative;
    z-index: 2;
}

.quartz-parquet__feature-text {
    font-family: var(--font-base);
    font-size: max(16px, 0.938vw);
    font-weight: 500;
    color: var(--text-main);
    position: relative;
    z-index: 2;
}

.quartz-parquet__feature-text--bold {
    font-weight: 800;
}

@media (min-width: 48.01rem) {

    .quartz-parquet__room img {
        transition: transform .25s;
    }

    .quartz-parquet__room:hover img {
        transform: scale(1.15);
    }

    .quartz-parquet__grid {
        column-gap: max(15px, 1.563vw);
        grid-template-columns: clamp(1px, 42.1vw - 588px, 220px) max(110px, 6.823vw) 1fr 45%;
    }

    .quartz-parquet__head {
        grid-column: 3 / 4;
        grid-row: 1 / 2;
        padding: var(--wrap-pt) 0 0 0;
    }

    .quartz-parquet__body {
        grid-column: 3 / 4;
        grid-row: 2 / 3;
        padding: 0;
        max-width: max(500px, 35vw);
        padding-bottom: max(80px, 4.375vw);
    }

    .quartz-parquet__plank {
        grid-column: 2 / 3;
        grid-row: 1 / 3;
        margin-left: 0;
        margin-top: var(--wrap-pt);
    }

    .quartz-parquet__media {
        grid-column: 4 / 5;
        grid-row: 1 / 3;
        padding-top: var(--wrap-pt);
        padding-left: 0;
        margin-bottom: 0;
    }

    .quartz-parquet__title {
        white-space: normal;
    }

    .quartz-parquet__rooms {
        justify-content: flex-start;
        gap: max(15px, 1vw);
        flex-wrap: wrap;
        overflow: visible;
    }
}

@media (min-width: 120rem) {
    .quartz-parquet__grid {
        grid-template-columns: clamp(1px, 6vw + 5.5%, 28vw) max(110px, 6.823vw) 1fr 45%;
    }
}