/*=========================================================
PROYECTO : CAMPUS VIRTUAL ESCUELA DE OFICIOS

ARCHIVO : responsive.css

VERSIÓN : 0.1
=========================================================*/


/*=========================================================
TABLETS
=========================================================*/

@media (max-width:1200px){

.hero-container{

    grid-template-columns:1fr;

    text-align:center;

}

.hero-buttons{

    justify-content:center;

}

.cards-metodo{

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

}

.galeria-grid{

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

}

.accesos-grid{

    grid-template-columns:1fr;

}

.contenedor-footer{

    grid-template-columns:1fr;

    text-align:center;

}

}


/*=========================================================
CELULARES
=========================================================*/

@media (max-width:768px){

.hero-content h1{

    font-size:42px;

}

.hero-content h2{

    font-size:26px;

}

.hero-intro{

    font-size:18px;

}

.hero-buttons{

    flex-direction:column;

}

.btn-principal{

    width:100%;

    text-align:center;

}

.btn-secundario{

    width:100%;

    text-align:center;

}

.cards-metodo{

    grid-template-columns:1fr;

}

.galeria-grid{

    grid-template-columns:1fr;

}

.linea-tiempo{

    flex-direction:column;

}

.accesos-grid{

    grid-template-columns:1fr;

}

section{

    padding:70px 0;

}

.titulo-seccion h2{

    font-size:30px;

}

}


/*=========================================================
TELÉFONOS PEQUEÑOS
=========================================================*/

@media (max-width:480px){

.hero-content h1{

    font-size:34px;

}

.hero-content h2{

    font-size:22px;

}

.hero-intro{

    font-size:16px;

}

.campus-etiqueta{

    font-size:13px;

}

.slide{

    font-size:16px;

}

.btn-principal{

    padding:16px;

}

.btn-secundario{

    padding:16px;

}

.card{

    padding:30px;

}

.acceso-card{

    padding:30px;

}

}