/* MAIN APP WRAPPER */

#app{
    font-family: Arial, sans-serif;
    max-width:1400px;
    margin:auto;
    padding:20px;
}


/* HEADER */

.agp-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:20px;
}

.agp-header button{
    background:#0073aa;
    color:#fff;
    border:none;
    padding:10px 16px;
    border-radius:6px;
    cursor:pointer;
    font-size:14px;
}

.agp-header button:hover{
    background:#005f8a;
}


/* GRID LAYOUT */

/* GRID LAYOUT */

.agp-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:12px;
    width:100%;
}

/* TABLET */

@media (min-width:768px){
    .agp-grid{
        grid-template-columns:repeat(3,1fr);
    }
}

/* DESKTOP */

@media (min-width:1200px){
    .agp-grid{
        grid-template-columns:repeat(4,1fr);
    }
}


/* CARD DESIGN */




.agp-card{
    background:#ffffff;
    border-radius:14px;
    overflow:hidden;
    box-shadow:0 4px 14px rgba(0,0,0,0.12);
    cursor:pointer;
    transition:all .25s ease;
}



.agp-card:hover{
    transform:translateY(-5px);
    box-shadow:0 8px 22px rgba(0,0,0,0.18);
}


/* IMAGE */

.agp-card img{
    width:100%;
    height:170px;
    object-fit:cover;
    display:block;
}


/* TITLE */

.agp-card h3{
    font-size:15px;
    padding:12px;
    text-align:center;
    line-height:1.4;
}


/* GUIDE VIEW PAGE */

.agp-view{
    max-width:700px;
    margin:auto;
}

.agp-view img{
    width:100%;
    border-radius:12px;
    margin-bottom:15px;
}

.agp-view h2{
    margin-bottom:10px;
}

.agp-view audio{
    width:100%;
    margin:15px 0;
}


/* BACK BUTTON */

.agp-view button{
    margin-bottom:15px;
    padding:8px 14px;
    border:none;
    background:#0073aa;
    color:#fff;
    border-radius:6px;
    cursor:pointer;
}

.agp-view button:hover{
    background:#005f8a;
}