/* Masonry-style property grid: 3 cols, asymmetric row spans */
.masonry-grid-luxury {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.75rem;
    grid-template-areas:
        "penthouses luxury waterfront"
        "penthouses luxury waterfront"
        "resort     luxury mountain"
        "resort     acreage mountain"
        "resort     acreage mountain";
}

.masonry-grid-luxury>* {
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    border-radius: 10px;
    box-shadow: 0px 10px 20px #00000080;
}

.penthouses {
    grid-area: penthouses;
    aspect-ratio: 536 / 321;
}

.luxury {
    grid-area: luxury;
    aspect-ratio: 536 / 492;
}

.waterfront {
    grid-area: waterfront;
    aspect-ratio: 536 / 321;
}

.resort {
    grid-area: resort;
    aspect-ratio: 536 / 492;
}

.acreage {
    grid-area: acreage;
    aspect-ratio: 536 / 321;
}

.mountain {
    grid-area: mountain;
    aspect-ratio: 536 / 492;
}

@media (max-width: 1024px) {
    .masonry-grid-luxury {
        grid-template-columns: 1fr 1fr;
        grid-template-areas:
            "penthouses luxury"
            "waterfront resort"
            "acreage    mountain";
    }

    .masonry-grid-luxury>* {
        aspect-ratio: 536 / 492 !important;
    }
}

@media (max-width: 768px) {
    .masonry-grid-luxury {
        grid-template-columns: 1fr;
        grid-template-areas:
            "penthouses"
            "luxury"
            "waterfront"
            "resort"
            "acreage"
            "mountain";
    }

    .masonry-grid-luxury>* {
        aspect-ratio: 536 / 321 !important;
    }
}

.city-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
}

.city-grid ul {
    list-style: none;
    margin: 0;
    padding: 0 var(--space-05x);
    border-left: 1px solid rgba(255, 255, 255, 0.5);
}

.city-grid ul:first-child {
    padding-left: 0;
    border-left: none;
}

.city-grid li {
    padding: 0.25rem 0;
}

.city-grid a {
    color: white;
    text-decoration: none;
    font-size: 1rem;
}

.city-grid a:hover {
    text-decoration: underline;
}

.city-grid-footer {
    display: flex;
    justify-content: center;
    padding-top: 2.5rem;
}

@media (max-width: 1024px) {
    .city-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .city-grid ul:nth-child(odd) {
        border-left: none;
        padding-left: 0;
    }
}

@media (max-width: 768px) {
    .city-grid {
        grid-template-columns: 1fr;
    }

    .city-grid ul {
        border-left: none;
        padding-left: 0;
    }

    .city-grid ul:first-child {
        border-top: none;
    }
}

@media (max-width: 768px) {
    .city-grid-footer {
        justify-content: flex-start;
    }
}