/* Author: Adrian Martinez Fuentes - UO295454 */

/* Especificidad 002 */
main > section {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(17em, 1fr)); 
    gap: 2.5em;
    justify-items: center;
    margin: 1em 1em;
    box-sizing: border-box;
}

/* Especificidades: 002, 003 */
main h2, main > section > h3 {
    grid-column: 1 / -1;
    width: 100%;
    height: auto;
}

/* Especificidad 003 */
main > section > h3 {
    font-size: 1.5em;
    margin-top: 1.2em;
    text-decoration: underline;
}

/* Especificidad 004 */
main > section article h4 {
    margin: 0em auto;
    text-decoration: none;
}

/* Especificidades: 003, 004 */
main > section > h3, main > section article h4 {
    text-align: center;    
}

/* Especificidad 002 en cada selector */
main h3, main > button {
    grid-column: 1 / -1;
    font-size: 1.5em;
}

@media (max-width: 780px) {
    /* Especificidad 002 */
    main > button {
        /* Redefinir el tamaño de la fuente es necesario para evitar que se vea muy grande en pantallas pequeñas */
        font-size: 1.2em;
    }
}

@media (max-width: 490px) {
    /* Especificidad 002 */
    main > button {
        /* Redefinir el tamaño de la fuente es necesario para evitar que se vea muy grande en pantallas pequeñas */
        font-size: 1.05em;
    }
}

/* Especificidad 002 */
main > button {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    border: none;
    border-radius: 1em;
    padding: 0.5em 1em;
    margin: 1em auto;
    cursor: pointer;
}

/* Especificidad 003 */
main > section article {
    box-shadow: 0 2em 2.5em #0000001a;
    padding: 1em;
    color: #000000;
    background-color: #FFFFFF;
    border-radius: 2em;
    display: flex;
    flex-direction: column;
    width: 90%; 
}

/* Especificidad 013 */
main > section article:hover {
    transform: scale(1.02);
}

/* Especificidad 004 en cada selector */
main > section article header, main > section article footer {
    justify-content: center;
    align-items: center;
    background-color: #645326;
    color: #FFFFFF;
    margin-bottom: 0.5em;
    padding: 0.5em;
}

/* Especificidad 004 */
main > section article h3 {
    font-size: 1em;
    margin: 0 auto;
}

/* Especificidad 004 */
main > section article p {
    font-size: 1em;
    line-height: 1.5;
    margin: 0.5em 0;
    padding: 0 1em;
}

/* Media Queries */
@media (max-width: 490px) {
    /* Especificidad 003 */
    main > section > h3 {
        /* Redefinir el tamaño de la fuente es necesario para evitar que se vea muy grande en pantallas pequeñas */
        font-size: 1.05em;
    }
}