/* ==========================
   Apps
========================== */

/* -------------------------
   App Grid
------------------------- */

.app-grid{
    display: grid;
    grid-template-columns: repeat(auto-fit, 280px);
    justify-content: center;
    gap: 20px;
}

/* -------------------------
   App Card
------------------------- */

.app-card{

    background:#ffffff;

    border-radius:16px;

    padding:20px;

    text-align:center;

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

    transition:.2s;

}

.app-card:hover{

    transform:translateY(-4px);

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

}

/* -------------------------
   App Icon
------------------------- */

.app-icon{

    width:90px;

    height:90px;

   
margin:0 auto;


    flex-shrink:0;

    border-radius:20px;

    overflow:hidden;

    background:#f4f4f4;

}

.app-icon img{

    width:100%;

    height:100%;

    object-fit:cover;

}

/* -------------------------
   App Info
------------------------- */

.app-info{

    flex:1;

}

.app-info h2,
.app-info h3{

    margin-bottom:10px;

}

/* -------------------------
   Detail Header
------------------------- */

.app-detail-header{

    display:flex;

    flex-direction:column;

    align-items:center;

    text-align:center;

    gap:24px;

    margin-top:20px;

}

.app-detail-header .app-info{

    width:100%;

}

/* -------------------------
   App Image
------------------------- */

.app-image{

    height:240px;

    border-radius:18px;

    background:#eef3ea;

    display:flex;

    justify-content:center;

    align-items:center;

   color:#56785c;

}
/* ==========================
   Screenshot Card
========================== */

.screenshot-card{

    padding:40px;

}