/* ===================================
   TOP RESTAURANTS
=================================== */

.top-restaurants{

    padding:50px 0;

    background:#fff;

}

.restaurant-grid{

    display:grid;

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

    gap:22px;

}

.restaurant-card{

    display:block;

    text-decoration:none;

    color:#222;

    background:#fff;

    border-radius:18px;

    padding:22px 18px;

    text-align:center;

    box-shadow:0 5px 18px rgba(0,0,0,.08);

    transition:.3s;

}

.restaurant-card:hover{

    transform:translateY(-6px);

    box-shadow:0 12px 30px rgba(0,0,0,.12);

    color:#222;

}

.restaurant-logo{

    width:110px;

    height:110px;

    border-radius:50%;

    object-fit:cover;

    display:block;

    margin:0 auto 15px;

    border:3px solid #f3f3f3;

    box-shadow:0 4px 12px rgba(0,0,0,.10);

}

.restaurant-card h4{

    font-size:18px;

    font-weight:700;

    margin:10px 0 8px;

    color:#222;

}

.restaurant-meta{

    font-size:14px;

    color:#666;

}

/* ===========================
   Tablet
=========================== */

@media(max-width:992px){

.restaurant-grid{

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

    gap:18px;

}

.restaurant-logo{

    width:95px;

    height:95px;

}

}

/* ===========================
   Mobile
=========================== */

@media(max-width:576px){

.top-restaurants{

    padding:30px 0;

}

.restaurant-grid{

    display:grid;

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

    gap:12px;

}

.restaurant-card{

    padding:15px 10px;

    border-radius:14px;

}

.restaurant-logo{

    width:75px;

    height:75px;

    margin-bottom:10px;

}

.restaurant-card h4{

    font-size:14px;

    margin:8px 0 5px;

    line-height:1.3;

}

.restaurant-meta{

    font-size:11px;

    line-height:1.4;

}

}