@import url('https://fonts.googleapis.com/css2?family=Barlow+Semi+Condensed:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

/* root*/
:root{
    --clr-Purple-50: #eee5ff;
    --clr-Purple-300: #c4a2f6;
    --clr-Purple-500: #7541c8;
    --clr-White: #ffffff;
    --clr-Grey-100: #e7eaee;
    --clr-Grey-200: #cfcfcf;
    --clr-Grey-400: #676d7e;
    --clr-Grey-500: #48556a;
    --clr-Dark-blue: #19212e;
    --clr-Black: #121212;

    --ff-main: "Barlow Semi Condensed", sans-serif;
    --fs-heading: 13px;

    --fw-500: 500;
    --fw-600: 600;
}

/* reset */
*{
    margin: 0;
    padding: 0;
}

.description{
    clear: both;
}

body{
    box-sizing: border-box;
    font-family: var(--ff-main);
    font-weight: var(--fw-500);
    line-height: 1.1;
    color: var(--clr-White);
    background: #F6F5F6;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

/* ui components */
.daniel{
    background: var(--clr-Purple-500);
}

.jonathan{
    background: var(--clr-Grey-500);
}

.kira{
    background: var(--clr-White);
    color: var(--clr-Grey-500);
}

.jeanette{
    background: var(--clr-White);
    color: var(--clr-Grey-500);
}

.patrick{
    background: var(--clr-Dark-blue);
    color: var(--clr-Grey-200);
}

/* layout styles */
.grid-container{
    display: grid;
    grid-auto-columns: 1fr;
    grid-auto-rows: 1.7fr 1.7fr;
    grid-template-areas: 
        'box1 box1 box1 box1 box2 box2 box3 box3'
        'box4 box4 box5 box5 box5 box5 box3 box3'
    ;
    max-width: 90rem;
    gap: 2rem;
}

.grid-item{
    border-radius: 8px;
    padding: 2rem;
    box-shadow: 40px 60px 50px 0px rgba(72, 85, 106, 0.25);
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
}

.nombre{
    font-size: 15px;
    font-weight: var(--fw-500);
    line-height: 110%;
    margin-left: 3.5rem;
    margin-top: 5px;
}

.nombre em{
    font-family: "Barlow Semi Condensed";
    font-size: 13px;
    font-style: normal;
    font-weight: 400;
    line-height: 110%; /* 12.1px */
}

.daniel{
    grid-area: box1;
    z-index: -2;
}

.circulo-img{
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 2px solid #A775F1;
    background: url(./images/image-daniel.jpg) lightgray 50% / cover no-repeat;
    float: left;
}

.daniel em{
    color: var(--clr-Purple-50);
}

.daniel .description{
    font-family: "Barlow Semi Condensed";
    font-size: 26px;
    font-style: normal;
    font-weight: 600;
    line-height: 120%;
    margin-top: 20px;
    margin-bottom: -40px;
}

.daniel .description-two{
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 140%; /* 18.2px */
    margin-top: 60px;
    margin-bottom: -130px;
    color: var(--clr-Purple-50);
}

.daniel .comillas{
    border-radius: 0;
    position:relative;
    z-index: -1;
    left: 450px;
    top: -188px;
    width: 8rem;
}

.jonathan{
    grid-area: box2;
}

.circulo-img2{
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 2px solid #A775F1;
    background: url(./images/image-jonathan.jpg) lightgray 50% / cover no-repeat;
    float: left;
}

.jonathan em{
    color: var(--clr-Grey-100);
}

.jonathan .description{
    font-family: "Barlow Semi Condensed";
    font-size: 24px;
    font-style: normal;
    font-weight: 600;
    line-height: 120%;
    margin-top: 20px;
    margin-bottom: -40px;
}
.jonathan .description-two{
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 140%; /* 18.2px */
    margin-top: 60px;
    margin-bottom: -150px;
    color: var(--clr-Grey-100);
}

.kira{
    grid-area: box3;
}

.circulo-img3{
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 2px solid #A775F1;
    background: url(./images/image-kira.jpg) lightgray 50% / cover no-repeat;
    float: left;
}

.kira em{
    color: var(--clr-Grey-400);
}

.kira .description{
    font-family: "Barlow Semi Condensed";
    font-size: 24px;
    font-style: normal;
    font-weight: 600;
    line-height: 120%;
    margin-top: 20px;
    margin-bottom: -px;
}
.kira .description-two{
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 140%; /* 18.2px */
    margin-top: 60px;
    margin-bottom: -100px;
    color: var(--clr-Grey-400);
}

.jeanette{
    grid-area: box4;
}

.circulo-img4{
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 2px solid #A775F1;
    background: url(./images/image-jeanette.jpg) lightgray 50% / cover no-repeat;
    float: left;
}

.jeanette em{
    color: var(--clr-Grey-400);
}

.jeanette .description{
    font-family: "Barlow Semi Condensed";
    font-size: 28px;
    font-style: normal;
    font-weight: 600;
    line-height: 120%;
    margin-top: 20px;
    margin-bottom: -50px;
}
.jeanette .description-two{
    font-size: 18px;
    font-style: normal;
    font-weight: 500;
    line-height: 140%; /* 18.2px */
    margin-top: 60px;
    margin-bottom: -10px;
    color: var(--clr-Grey-400);
}

.patrick{
    grid-area: box5;
}

.circulo-img5{
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 2px solid #A775F1;
    background: url(./images/image-patrick.jpg) lightgray 50% / cover no-repeat;
    float: left;
}

.patrick em{
    color: var(--clr-White);
}

.patrick .description{
    font-family: "Barlow Semi Condensed";
    font-size: 26px;
    font-style: normal;
    font-weight: 600;
    line-height: 120%;
    margin-top: 20px;
    margin-bottom: -30px;
    color: var(--clr-Grey-200);
}
.patrick .description-two{
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 140%; /* 18.2px */
    margin-top: 60px;
    margin-bottom: -30px;
    color: var(--clr-Grey-100);
}

@media(max-width:1024px){
    body{
        height: 100%;
    }
    .grid-container{
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1.5fr 1fr;
        grid-template-areas: 
            'box1 box1'
            'box1 box1'
            'box2 box4'
            'box2 box4'
            'box5 box5'
            'box5 box5'
            'box3 box3'
            'box3 box3'
        ;
        gap: 2rem;
        padding: 4rem;
    }

    .daniel .comillas{
        border-radius: 0;
        position:relative;
        z-index: -1;
        left: 450px;
        top: -165px;
        width: 8rem;
    }

    .daniel img{
        display: none;
    }
}

@media(max-width:480px){
    body{
        height: 100%;
    }
    .grid-container{
        display: grid;
        grid-template-columns: 1fr;
        grid-auto-rows: 1fr 1fr 1fr 1fr 1fr 200px 1fr 1fr 1fr;
        gap: 2rem;
        padding: 1rem;
    }

    .daniel .comillas{
        border-radius: 0;
        position:relative;
        z-index: -1;
        left: 450px;
        top: -165px;
        width: 8rem;
    }

    .daniel .description-two{
        margin-bottom: -100px;
    }

    .jonathan{
        grid-area: 3/1/4/3;
    }

    .jonathan .description-two{
        margin-bottom: 0px;
    }

    .jeanette{
        grid-area: 4/1/5/3;
    }

    .daniel img{
        display: none;
    }
}