* {
    box-sizing: border-box;
}


body {
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
    background: #f5f5f5;
}


.library-section {
    padding: 80px 20px;
}


.library-container {
    max-width: 1200px;
    margin: auto;
}


/* HEADER */

.library-header {
    text-align: center;
    margin-bottom: 50px;
}


.library-header h1 {
    font-size: 42px;
    margin-bottom: 15px;
}


.library-header p {
    font-size: 18px;
    color: #666;
}



/* GRID */

.component-grid {

    display: grid;

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

    gap: 30px;

}



/* CARD */

.component-card {

    background: white;

    border-radius: 16px;

    padding: 25px;

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

    transition: transform .3s ease;

}



.component-card:hover {

    transform: translateY(-5px);

}



.component-card h2 {

    font-size: 22px;

    margin-top: 0;

    margin-bottom: 20px;

}



.component-card img {

    width:100%;

    height:180px;

    object-fit:cover;

    border-radius:12px;

}



/* FOOTER AREA */

.component-info {

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-top:20px;

}


.component-info span {

    font-size:14px;

    color:#666;

}



.component-button {

    width:42px;

    height:42px;

    display:flex;

    align-items:center;

    justify-content:center;

    background:#111;

    color:white;

    text-decoration:none;

    border-radius:50%;

    font-size:22px;

    transition:.3s;

}



.component-button:hover {

    transform:translateX(5px);

}



/* TABLET */

@media(max-width:900px){

    .component-grid{

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

    }

}



/* MOBILE */

@media(max-width:600px){

    .component-grid{

        grid-template-columns:
        1fr;

    }


    .library-header h1{

        font-size:34px;

    }

}