/*==================================================
    DESTINATIONS
==================================================*/

.destinations{

    background:var(--surface);

}

.destinations .section-heading{

    max-width:720px;

    margin-bottom:50px;

}

.destinations .section-description{

    max-width:650px;

}

/*==================================================
    GRID
==================================================*/

.destinations-grid{

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:22px;

}

.destination-card{

    position:relative;

    height:420px;

    overflow:hidden;

    border-radius:var(--radius-lg);

    background:#111;

    cursor:pointer;

}

.destination-image{

    width:100%;

    height:100%;

}

.destination-image img{

    width:100%;

    height:100%;

    object-fit:cover;

    transition:.6s ease;

}

.destination-card::after{

    content:"";

    position:absolute;

    inset:0;

    background:
        linear-gradient(
            to top,
            rgba(0,0,0,.85) 0%,
            rgba(0,0,0,.25) 50%,
            rgba(0,0,0,.05) 100%
        );

    z-index:1;

}

.destination-card:hover .destination-image img{

    transform:scale(1.08);

}

.destination-overlay{

    position:absolute;

    left:25px;

    right:25px;

    bottom:25px;

    z-index:2;

    color:#fff;

}

.destination-overlay span{

    display:block;

    margin-bottom:5px;

    color:var(--primary);

    font-size:13px;

    font-weight:700;

    text-transform:uppercase;

    letter-spacing:1px;

}

.destination-overlay h3{

    margin:0;

    padding-right:35px;

    color:#fff;

    font-size:21px;

    font-weight:700;

}

.destination-overlay i{

    position:absolute;

    right:0;

    bottom:2px;

    width:38px;

    height:38px;

    display:flex;

    align-items:center;

    justify-content:center;

    border:1px solid rgba(255,255,255,.35);

    border-radius:50%;

    color:var(--primary);

    font-size:13px;

    transition:.3s;

}

.destination-card:hover .destination-overlay i{

    background:var(--primary);

    border-color:var(--primary);

    color:#111;

    transform:translateX(4px);

}

/*==================================================
    BOTTOM
==================================================*/

.destinations-bottom{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:30px;

    margin-top:35px;

    padding:22px 25px;

    background:var(--white);

    border-radius:var(--radius-md);

    box-shadow:var(--shadow-sm);

}

.destinations-bottom > div{

    display:flex;

    align-items:center;

    gap:12px;

    color:var(--title);

    font-size:15px;

    font-weight:600;

}

.destinations-bottom i{

    color:var(--primary);

    font-size:20px;

}

/*==================================================
    RESPONSIVE
==================================================*/

@media(max-width:1200px){

    .destinations-grid{

        grid-template-columns:repeat(2,1fr);

    }

}

@media(max-width:768px){

    .destinations-grid{

        grid-template-columns:1fr 1fr;

        gap:15px;

    }

    .destination-card{

        height:330px;

    }

    .destination-overlay{

        left:18px;

        right:18px;

        bottom:18px;

    }

    .destination-overlay h3{

        font-size:18px;

    }

    .destinations-bottom{

        flex-direction:column;

        align-items:flex-start;

    }

    .destinations-bottom .btn{

        width:100%;

        text-align:center;

    }

}

@media(max-width:480px){

    .destinations-grid{

        grid-template-columns:1fr;

    }

    .destination-card{

        height:360px;

    }

}