.villa {
    padding: 4em 15%;
    padding-top: calc(var(--header-height) + 4rem) !important;
    display: flex;
    align-items: stretch;
    gap: 2em;
}

.villa h2 {
    font-size: 2.5em;
    color: #4B4133;
    font-family: 'Playfair Display', serif;
    font-weight: 400;
    margin-bottom: 1em;
}

.villa img {
    width: 100%;
    min-width: 400px;
    object-fit: cover;
}

.villa .segment {
    padding: 2em !important;
}

.villa button {
    background-color: #b8954f !important;
    color: #F1EDEA !important;
}

@media only screen and (max-width: 865px) {
    .villa {
        flex-direction: column;
        padding-left: 10%;
        padding-right: 10%;
    }

    .villa img {
        min-width: 0;
    }
}

/*
    Quote Section
*/

.quote {
    padding: 2em 15%;
    background-color: #b8954f;
}

.quote h3 {
    color: #F1EDEA;
    font-family: 'Playfair Display', serif;
    text-align: center;
}

@media only screen and (max-width: 865px) {
    .quote {
        padding: 1em 2em;
    }
}

/*
    Details Section
*/

.details {
    padding: 4em 15%;
}

.details h2 {
    font-size: 2.5em;
    color: #4B4133;
    font-family: 'Playfair Display', serif;
    font-weight: 400;
}

.details .grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2em;
    margin-top: 2em;
}

.details .grid .item {
    background-color: #F1E8D5;
    padding: 20px;
}

.details .grid .item h3 {
    font-size: 1.5em;
    color: #4B4133;
    font-family: 'Playfair Display', serif;
    font-weight: 400;
}

.details .grid .item p {
    font-size: 1em;
    color: #4B4133;
    font-weight: 400;
}

@media only screen and (max-width: 865px) {
    .details {
        padding-left: 10%;
        padding-right: 10%;
    }

    .details .grid {
        grid-template-columns: 1fr;
    }
}

/*
    Why Section
*/

.why {
    display: flex;
    align-items: stretch;
    background-color: #251E10;
    color: #F8F3EA;
}

.why .left,
.why .right {
    width: 50%;
}

.why .left {
    padding: 5em;
}

.why .right {
    object-fit: cover;
}

.why .left h2 {
    font-size: 2.5em;
    font-family: 'Playfair Display', serif;
    font-weight: 400;
}

.why .left p {
    font-size: 1em;
    color: #F8F3EA;
    font-weight: 400;
}

.why .left .list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 30px 0;
}

.why .left .list .entry {
    display: flex;
    align-items: center;
    gap: 10px;
}

.why .left .list .entry img {
    stroke: #b8954f;
}

@media only screen and (max-width: 865px) {
    .why {
        flex-direction: column;
    }

    .why .left,
    .why .right {
        width: 100%;
    }

    .why .left {
        padding: 2em 10%;
    }
}

/*
    Book Section
*/

.book {
    padding: 4em 20%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.book h2 {
    font-size: 2.5em;
    color: #4B4133;
    font-family: 'Playfair Display', serif;
    font-weight: 400;
}

.book button {
    display: inline-block;
    background-color: #b8954f !important;
    color: #F1EDEA !important
}

@media only screen and (max-width: 865px) {
    .book {
        padding: 2em 10%;
    }
}