#discover{
    padding:5rem 0;
}

#discover h2{
    text-align: center;
}

#discover .container>div{
    width: 100%;
    height:22rem;
    display:flex;
    justify-content: space-between;
    align-items: flex-start;
}

#discover .card{
    width:23%;
    height:20rem;
    border-radius: 1rem;
    overflow: hidden;
    position:relative;
}
#discover .card:nth-of-type(2),#discover .card:nth-of-type(4){
    align-self: flex-end;
}
#discover .card .card__background{
    width: 100%;
    height: 100%;
    object-fit:cover;
}
#discover .card .location{
    position: absolute;
    top:1rem;
    right:1rem;
    z-index: 3;
    display:flex;
    align-items: center;
    justify-content: space-around;
    background-color: white;
    padding:0.5rem;
    border-radius: 20px;
}
#discover .card .location> img{
    width:0.8rem;
    object-fit: cover;
    margin-right: 0.25rem;
}
#discover .card .location> p{
    font-size: 0.85rem;
}
@media screen and (max-width:1050px){
    #discover{
        padding:5rem 0 2rem 0;
    }
    
    #discover .container>div{
        width: 100%;
        height:17rem;
    }
    
    #discover .card{
        height:15rem;
    }

    #discover .card .location{
        font-size: 0.85rem;
    }
}
@media screen and (max-width:635px){
    
    #discover .container>div{
        width: 100%;
        height:auto;
        display:grid;
        grid-template-columns: 1fr 1fr;
        gap:1rem;
    }
    
    #discover .card{
        width: 100%;
        height:15rem;
    }
    #discover .card:nth-of-type(2),#discover .card:nth-of-type(4){
        align-self: auto;
    }
}