*{ margin: 0; padding: 0; max-width: 80rem; margin: auto; box-sizing: border-box;}



/***********/
/* General mobile*/
/***********/

/***********/
/* Navegación */
/***********/

header nav {background: #fff; text-align: center; font-size: 15pt; ;}
.banner {width: 100%; height: auto; border-radius: 0;}
header nav ul li {display: inline-block;padding: 2%  4%; text-align: center;list-style-type: none;}
header nav ul li a {text-decoration: none; color: #47d3cd; }

body{font-family: 'Roboto', sans-serif; background: linear-gradient(to top right, #E5007E 0%, #009992 100%);} 
h1 {color: white; padding: 1rem; text-align: center; font-size:30pt; }
.integrantes {font-weight: 600;padding: 1rem; font-size: 24pt; width: 100%; text-align: center; color: #fff}
section {text-align: center;}
footer {color: #fff; text-align: center;padding: 4rem 0.5rem; font-size: 10pt; font-style: italic;}

/*a {text-decoration: none; color: #000;} */


article{ width: 100%; background: #0b626d; }
article a { display: inline-block; font-size: 1.2rem; width: 100%;  padding: 2rem 0 2rem 0; transition: all 1s; }
img {width:100%;height: 100%; border-radius: 18rem}


/* PREGUNTAR para hover texto con nombre

article a:hover {background: #000; display: inline-block; font-size: 1.2rem; width: 20%;  padding: 2rem 0 2rem 0;}
*/



/* a partir de 768px tablet*/

@media(min-width:48rem){
    header nav ul li {display: inline-block; padding: 2%  4%; text-align: center;list-style-type: none;}
    header nav ul li a {font-size: 32px;}
    section {display: flex; flex-wrap: wrap;}
    article a {width: 46%; margin: 8px}
    h1 {font-size: 45pt}
    header nav {width: 100%;}
}


/* a partir de 1280px desktop*/

@media(min-width:1024px){
    header nav ul li a {font-size: 15pt;}
    section {display: flex; flex-wrap: wrap;}
    article a {width: 21%; margin: 2px; padding: 1rem}
    h1 {font-size: 60pt}
    header nav {width: 100%;}
}