/* ==========================================
   Catalog
   ========================================== */

*,
*::before,
*::after{
    box-sizing:border-box;
}

.catalog-page{

    width:100%;
    max-width:1400px;

    margin:48px auto 80px;

    padding:0 20px;
}

.catalog-page h1{

    margin:0 0 16px;

    font-size:56px;
    font-weight:800;
    line-height:1.1;

    color:#1d1d1f;
}

.catalog-description{

    margin:0 0 48px;

    font-size:20px;
    line-height:1.6;

    color:#667085;
}

/* ==========================================
   Grid
   ========================================== */

.catalog-grid{

    display:grid;

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

    gap:32px;

    width:100%;
}

/* ==========================================
   Card
   ========================================== */

.catalog-card{

    display:flex;
    flex-direction:column;

    background:#fff;

    border-radius:24px;

    overflow:hidden;

    text-decoration:none;

    color:#1d1d1f;

    transition:.25s;

    box-shadow:0 12px 32px rgba(15,23,42,.08);
}

.catalog-card:hover{

    transform:translateY(-6px);

    box-shadow:0 20px 44px rgba(15,23,42,.12);
}

.catalog-card-image{

    height:240px;

    display:flex;
    align-items:center;
    justify-content:center;

    overflow:hidden;

    background:#f5f7fb;
}

.catalog-card-image img{

    width:100%;
    height:100%;

    object-fit:cover;

    transition:.35s;
}

.catalog-card:hover img{

    transform:scale(1.05);
}

.catalog-no-image{

    display:flex;

    align-items:center;
    justify-content:center;

    width:100%;
    height:100%;

    font-size:96px;
    font-weight:800;

    color:#2563eb;
}

.catalog-card-body{

    display:flex;

    flex-direction:column;

    gap:20px;

    padding:28px;

    flex:1;
}

.catalog-card-body h2{

    margin:0;

    font-size:32px;
    font-weight:700;

    line-height:1.2;
}

.catalog-card-body span{

    margin-top:auto;

    font-size:18px;
    font-weight:600;

    color:#2563eb;
}

.catalog-card-body span::after{

    content:" →";
}

/* ==========================================
   Responsive
   ========================================== */

@media (max-width:1200px){

    .catalog-grid{

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

}

@media (max-width:900px){

    .catalog-grid{

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

}

@media (max-width:600px){

    .catalog-page{

        margin:32px auto 56px;
    }

    .catalog-page h1{

        font-size:40px;
    }

    .catalog-grid{

        grid-template-columns:1fr;
    }

    .catalog-card-image{

        height:220px;
    }

}