/* ==========================================================
   BIBLIOTECA BIK
   LAYOUT
   Versión 1.0
   ========================================================== */


/* ===============================
   RESET BÁSICO
   =============================== */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}


/* ===============================
   BODY
   =============================== */

body{

    font-family:var(--fuente-principal);

    background:var(--fondo-blanco);

    color:var(--texto-principal);

    line-height:1.6;

}


/* ===============================
   CONTENEDOR GENERAL
   =============================== */

.container{

    width:100%;

    max-width:var(--ancho-maximo);

    margin:auto;

    padding-left:20px;

    padding-right:20px;

}


/* ===============================
   MAIN
   =============================== */

main{

    width:100%;

    min-height:100vh;

}


/* ===============================
   SECCIONES
   =============================== */

section{

    padding:60px 0;

}


/* ===============================
   BANNER
   =============================== */

.banner{

    width:100%;

    min-height:350px;

    display:flex;

    align-items:center;

    justify-content:center;

}


/* ===============================
   CONTENIDO
   =============================== */

.contenido{

    width:100%;

}


/* ===============================
   GRID GENERAL
   =============================== */

.grid{

    display:grid;

    gap:30px;

}


/* ===============================
   GRID DE CATEGORÍAS
   =============================== */

.grid-categorias{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(280px,1fr));

    gap:30px;

}


/* ===============================
   GRID DE RECURSOS
   =============================== */

.grid-recursos{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(350px,1fr));

    gap:30px;

}


/* ===============================
   GRID DOS COLUMNAS
   =============================== */

.grid-2{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:40px;

}


/* ===============================
   GRID TRES COLUMNAS
   =============================== */

.grid-3{

    display:grid;

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

    gap:30px;

}


/* ===============================
   GRID CUATRO COLUMNAS
   =============================== */

.grid-4{

    display:grid;

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

    gap:25px;

}


/* ===============================
   IMÁGENES
   =============================== */

img{

    display:block;

    max-width:100%;

    height:auto;

}


/* ===============================
   ENLACES
   =============================== */

a{

    text-decoration:none;

    color:inherit;

}


/* ===============================
   LISTAS
   =============================== */

ul{

    list-style:none;

}


/* ===============================
   RESPONSIVE
   =============================== */

@media(max-width:992px){

    .grid-4{

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

    }

    .grid-3{

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

    }

}


@media(max-width:768px){

    .grid-2,
    .grid-3,
    .grid-4{

        grid-template-columns:1fr;

    }

    section{

        padding:40px 0;

    }

}


@media(max-width:576px){

    .container{

        padding-left:15px;

        padding-right:15px;

    }

    .banner{

        min-height:250px;

    }

}