body{
    font-family: "Barlow Semi Condensed", serif;
    margin: 5em 14em 2em 14em;
}

html{
    background-color: hsl(0, 0%, 81%);
}

.flex{
    display: flex;
    flex-direction: row;
    padding-top: 0em;
}

.derecha img {
    border-radius: 50px;
    height: 1.6em;
}

.izquierda {
    text-align: start;
    padding-left: 15px;
    width: 100%;
    font-weight:lighter;
}



.borde img {
    border-radius: 50px;
    border: 3px solid hsl(263, 48%, 61%);
}

.subtitulo1{
    margin-bottom: 0px;
    margin-top: 1px;
    font-size: 0.7em;
}

.subtitulo2{
    font-size: 0.6em;
}

.subtitulo1, .titulo{
    color: hsl(0, 0%, 100%);
}

.texto{
    color: hsl(0, 0%, 81%);
}

.c3 .subtitulo1, .c5 .subtitulo1, .c3 .titulo, .c5 .titulo, .c3 .texto, .c5 .texto{
    color: black;
    opacity: 0.7;
}

.subtitulo2{
    color: hsl(0, 0%, 81%);
    margin-top: 0px;
}

.grid-layout{
    display: grid;
    grid-template-columns: 26% 26% 26% 26.5%;
    grid-template-rows: auto auto;
}

.caja{
    margin: 1em;
    padding: 1.5em 2em 0px 2em;
    border-radius: 10px;
}

.titulo{
    margin-top: 0.5em;
    font-size: 1.2em;
}

.texto{
    font-size: 0.83em;
    padding-bottom: 0.5em;
}

.c1{ /*Daniel Clifford*/
    background-color: hsl(263, 55%, 52%);
    grid-column: 1/3;
}

.flex .imagen{
    width: 100%;
    text-align: end;
    margin: -1.5em 3.3em 0em 2.3em;

}

.c1 .titulo{
    margin-top: -1.7em;
}

.c2{ /*Jonathan Walters*/
    grid-column: 3/4;
    background-color: hsl(217, 19%, 35%);
}

.c3{ /*Jeanette Harmon*/
    grid-column: 1/2;
    grid-row: 2/3;
    background-color: hsl(0, 0%, 100%);
}

.c4{ /*Patrick Abrams*/
    grid-column: 2/4;
    grid-row: 2/3;
    background-color: hsl(219, 29%, 14%);
}

.c5{ /*Kira Whittle*/
    grid-column: 4/5;
    grid-row: 1/3;
    background-color: hsl(0, 0%, 100%);
    line-height: 1.3;
}

@media screen and (max-width: 375px) {

    body{
        margin: 0px;
    }

    .subtitulo1{
        width: 100px;
        font-size: 0.8em;
    }
    
    .subtitulo2{
        font-size: 0.7em;
    }
    
    .derecha img {
        height: 1.8em;
    }

    .grid-layout{
        display: flex;
        flex-direction: column;
        margin: 2em 1em;
    }

    .caja{
        padding: 1.5em 2.8em 0px 1.3em;
    }

    .flex .imagen{
        margin: -1.5em 0em 0em 0.8em;
    
    }

    .titulo{
        font-size: 1.2em;
    }
    
    .texto{
        font-size: 0.81em;
    }
}