.page-header-listings {
    display: flex;
    height: auto;
    align-items: center;
    justify-content: center;  
    padding: 5rem 4rem 2rem;
}

.listings-title {
    display: flex;
    height: 10rem;
    width: 70rem;
    background-color: rgba(255, 255, 255, 0.904);
    border-radius: var(--home-bento-corner);
    justify-content: center;
    align-items: center;
    font-size: 4rem;
}

.ls-bio {
    
    display: grid;
    place-items: center;
    background: linear-gradient(180deg, rgb(255, 230, 245), rgba(255, 255, 255, 0.3));
    grid-area: intro;
    box-shadow: 0 0 .8rem .3rem rgba(0, 0, 0, .3);
    border: none;
    font-size: 1.5rem;
    border-radius: var(--home-bento-corner);
    width: 30rem;
    height: 20rem;

}

.ls-main {
    margin: 3rem auto 8rem;
    display: flex;
    gap: 8rem;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    width: min(80vw, 200rem)
}

.listing-pop-up {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin: 0;
    padding: 5rem;
    font-size: 2rem;
    border-radius: 1.2rem;
}

.listing-card {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto 35%;
    grid-template-areas: 
        "."
        "card-header";
    background-image: url(../pictures/house-with-paperwork.jpg);
    background-size: cover;
    border-radius: var(--home-bento-corner);
    width: 100%;
    height: 100%;
    transition: grid-template-rows .5s ease-in-out;


}

.listing-card-header {
    grid-area: card-header;
    background-color: rgba(240, 248, 255, .8);
    height: 100%;
    border-radius: 0 0 var(--home-bento-corner) var(--home-bento-corner);
}

.listing-card:hover {
    grid-template-rows: auto 65%;
}

@media screen and (max-width: 1000px) {
    .page-header-listings { 
        padding: 2rem 4rem .5rem;
    }

    .listings-title {
        height: 4rem;
        width: 40rem;
        max-width: 60vw;
        border-radius: var(--mobile-bento-corner);
        font-size: 2rem;
    }

    .ls-bio {
        place-items: center;
        border-radius: var(--mobile-bento-corner);
        width: 20rem;
        height: 14rem;
        max-width: 80vw;
    }

    .ls-main {
        margin: 3rem auto 8rem;
        display: flex;
        gap: 3rem;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
        width: min(80vw, 200rem)
    }

    .listing-card {
        display: grid;
        background-image: url(../pictures/house-with-paperwork.jpg);
        background-size: cover;
        border-radius: var(--mobile-bento-corner);
        width: 100%;
        height: 100%;
    }
    
}