@import url('https://fonts.googleapis.com/css2?family=Geologica:wght@200;300;400;500;600&display=swap');

.pd__container{
    width:90%;
    margin: 0 auto;
    box-sizing: border-box;
}


*{ box-sizing: border-box; }
html,body{ height:100%; }
body{
    margin:0;
    font-family: Geologica, Arial, sans-serif;
    color: var(--text);
    background:#fff;
}





.pd__title{
    margin: 0 0 50px;
    font-size: 70px;
    font-weight: 200;
}

.pd_grid{
    display:grid;
    margin: 0 0 5.2vw;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--gap);
    grid-template-areas:
    "c1 c2"
    "c3 c4"
    "c5 c7";
}
.pd_left_pair{
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--gap);
}

.pd_card{ display: block;}
.pd_card__media{
    display:block;
    background:#fff;
}
.pd_card__media img{
    display:block;
    height: 32vw;
    object-fit: cover;
    width: 100%;
}
.pd_card__caption{
    margin: var(--caption-mt) 0 0;
    font-size: 1.2vw;
    font-weight: 300;
}
.pd_card__floor__dup{ display:none; }
.pd__more{
    display:flex;
    justify-content:end;
    margin-top: 2.1vw;
    margin-bottom: 5.2vw;
}

.pd_btn{
    width: calc(25% - (var(--gap) / 3));
    height: 3.5vw;
    font-size: 1.1vw;
    font-weight: 300;
    cursor: pointer;
    border: 1px solid #000;
    background: #fff;
    transition: all .2s ease;
    font-family: Geologica, Arial, sans-serif;
    text-transform: uppercase;
    color: var(--text-main);

}
.pd_btn:hover{ background:#111; color:#fff; }

@media (max-width: 767px) {
    .pd__container {
        width: 90%;
    }
    #main-content
    {
        padding-top: 0;
        padding-bottom: 3vw;
    }
    .pd_card__kitchen,
    .pd_card__aledo,
    .pd_card__relax_2 {
        display: none !important;
    }

    .pd_card__floor:not(.pd_card__floor__dup) {
        display: none !important;
    }

    .pd_card__floor__dup {
        display: block !important;
    }

    .pd_grid {
        display: flex;
        flex-direction: column;
        gap: 16px;
    }

    .pd_card__interior {
        order: 1;
    }

    .pd_pair {
        order: 2;
    }

    .pd_card__green_bay {
        order: 3;
    }

    .pd_card__interior .pd_card__media img,
    .pd_card__green_bay .pd_card__media img {
        width: 100%;
        height: 65vw;
        object-fit: cover;
        display: block;
    }


    .pd_left_pair {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 16px;
        width: 100%;
    }

    .pd_left_pair .pd_card__floor__dup .pd_card__media img,
    .pd_left_pair .pd_card__relax_1 .pd_card__media img {
        width: 100%;
        height: 64vw;
        object-fit: cover;
        display: block;
    }

    .pd__title {
        margin: 0 0 12px;
        font-size: 30px;
        font-weight: 200;
    }

    .pd_card__caption {
        margin: 8px 0 0;
        font-size: 4vw;
        line-height: 1.3;
    }

    .pd__more {
        margin: 16px 0 28px;
    }

    .pd_btn {
        width: 100%;
        height: 11vw;
        font-size: 3.5vw;
    }

}

@media (min-width:768px) and (max-width:1024px){

    .pd_grid
    {
        margin-bottom: 10.4vw;
    }

    .pd_card__floor__dup{ display:none !important; }

    .pd__container{
        width: calc(100% - 40px);
        margin-inline: auto;
    }

    .pd_card__interior .pd_card__media img,
    .pd_card__kitchen  .pd_card__media img,
    .pd_card__green_bay .pd_card__media img,
    .pd_card__aledo   .pd_card__media img{
        width: 100%;
        height: 33.5vw;
        object-fit: cover;
        object-position: center;
        display: block;
    }
    .pd_card__floor_text{
        width: 50%;
    }
    .pd_left_pair{
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: var(--gap);
        width: 100%;
    }
    .pd_card__media img{
        width: 100%;
        height: 31.5vw;
    }
    .pd_card__relax_1 .pd_card__media img,
    .pd_card__relax_2 .pd_card__media img{
        width: 100%;
        height: 31.5vw;
        object-fit: cover;
        object-position: center;
        display: block;
    }

    .pd_card__caption{
        margin-top: 8px;
        font-size: 1.8vw;
        font-weight: 300;
    }
    .pd__title{
        font-size: 50px;
        font-weight: 200;
    }
    .pd_btn{
        width: calc(50% - (var(--gap) / 2));
        appearance: none;
        border: 1px solid var(--text);
        background: #fff;
        font-weight: 300;
        font-family: Geologica, Arial, sans-serif;
        cursor: pointer;
        transition: all .18s ease;
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--text-main);
        text-transform: uppercase;
        grid-column: 2 / 2;
        height: 4vw;
        font-size: 1.3vw;
    }
}
@media (max-width: 460px) {
    .pd_grid 
    {
        gap: 5.2vw;
        margin-bottom: 12.8vw;
    }
    .pd__container {
        width: 100%;
    }
    section.page.container
    {
        padding: 0;
    }
    .pd_card__media img
    {
        height: 66vw;
    }
}