/* 4 Box Styling Start*/
main {
    margin-top: 10vh;
    display: flex;
    flex-direction: row;
    gap: 20px;
    flex-wrap: wrap;
    justify-content: space-between;
}
main div {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: white;
    width: 48%;
    height: 35vh;
}
.learn_more {
    color: white;
    border: 2px solid white;
    border-radius: 5px;
    padding: 5px 10px;
    transition: all .2s linear;
}
.learn_more:hover {
    background-color: var(--ghsred);
    border: none;
}
.mainbtn {
    color: white;
}
.luxury_box {
    background: linear-gradient(rgba(0,0,0, .4), rgba(0,0,0, .4)),
    url("../img/houses/cochrane_villas/cochrane_villas.jpg");
    background-size: cover;
    box-shadow:5px 5px 10px 3px #ddd;
}
.affordable_box {
    background-image: linear-gradient(rgba(0,0,0, .4), rgba(0,0,0, .4)),url(../img/houses/heroes_3d/heroes_standard.jpg);
    background-size: cover;
    box-shadow: -5px 5px 10px 3px #ddd;
}
.comfy_box {
    background-image: linear-gradient(rgba(0,0,0, .4), rgba(0,0,0, .4)),url(../img/houses/Hazel/hazel_cropped.jpg);
    background-size: cover;
    box-shadow:5px -5px 10px 3px #ddd;
}
.plots_box {
    background:  linear-gradient(rgba(0,0,0,.4) , rgba(0,0,0,.4)), url(../img/houses/heroes_3d/nobles_gate.jpg) top / cover;
    box-shadow: -5px -5px 10px 3px #ddd;
}
/* Four Box Styling End */


@media (max-width:730px) {
    body {
        background-color: #fff;
    }
}

@media (max-width:520px) {
    main {
        flex-direction: column;
        flex-wrap: nowrap;
    }
    main div {
        width: 100%;
        height: 40vh;
    }
}