@import url('https://fonts.googleapis.com/css2?family=Barlow+Semi+Condensed:wght@500;700&display=swap');

:root {

    /*Primary*/

    --color_mod_violet: hsl(263, 55%, 52%);
    --color_border:hsl(263, 50%, 56%);
    --color_vd_grayish_blue: hsl(217, 19%, 35%);
    --color_vd_blackish_blue: hsl(219, 29%, 14%);
    --color_white: hsl(0, 0%, 100%);

    /*Neutral*/

    --color_lg_gray: hsl(0, 0%, 81%);
    --color_lg_grayish_blue: hsl(210, 46%, 95%);
    --color_bck: hsl(213,44%,95%);

    /*Font*/
    --fs_body:13px;
    --fw_semi:500;
    --fw_bold:600;
}

*,
*:before,
*:after {
    box-sizing: inherit;
}

html {
    box-sizing: border-box;
    font-size: 62.5%;
    /*1 rem = 10 px*/
}

body {
    font-family: 'Barlow Semi Condensed', sans-serif;
    font-size: var(--fs_body);
    min-height: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    background-color: var(--color_bck);
    margin-top: 6rem;
    margin-bottom: 6rem;
    padding: 0;
}

.container{
    width:85%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2.5rem;
}

.card{
    width: 100%;
    height: 100%;
    background-color: aqua;
    border-radius: 0.8rem;
    position: relative;
    padding: 2.8rem 3.2rem;
}

.card_header{
    display: flex;
    margin-bottom: 1.6rem;
}

.icono_profile{
    width: 32px;
    border-radius: 100%;
    border: 2px solid white;
    margin-right: 1.5rem;
}

.card:nth-child(3n+1) .icono_profile{
    border-color: var(--color_border);
}

.icon_quote{
    position: absolute;
    top: 0;
    right: 2.3rem;
}

.name_profile{
    font-size: var(--fs_body);
    font-weight: var(--fw_semi);
    display: flex;
    flex-direction: column;
}

.h2_span{
    font-size: 1.1rem;
    opacity: 50%;
}

.comment{
    font-size: 2rem;
    font-weight: var(--fw_bold);
    margin-bottom: 2.5rem;
    
}

.prhase{
    font-weight: var(--fw_semi);
    line-height: 1.8rem;
    opacity: 70%;
    font-weight: var(--fw_semi);
}


.card_1{
    background-color: var(--color_mod_violet);
    background-image: url(../images/bg-pattern-quotation.svg);
    background-repeat: no-repeat;
    background-position: top right 23px;
}
.card_2{
    background-color: var(--color_vd_grayish_blue);
}
.card_3{
    background-color: var(--color_white);
}
.card_4{
    background-color: var(--color_vd_blackish_blue);
}
.card_5{
    background-color: var(--color_white);
}

.white_color{
    color: var(--color_white);
}

.darkgrey_color{
    color: var(--color_vd_grayish_blue);
}

.attribution{
    margin-top: 1rem;

}

.attribution a{
    color: black;
    text-decoration: none;
}


@media (min-width:720px){

    body{
       min-height: 100vh;
       margin: 0;
    }
    
    .container{
        margin: 0;
        display: grid;
        grid-template-areas:
            "card_1 card_4"
            "card_2 card_3"
            "card_5 card_5";
        gap: 2rem;
    }

    .card_1{
        grid-area: card_1;
    }
    .card_2{
        grid-area: card_2;
    }
    .card_3{
        grid-area: card_3;
    }
    .card_4{
        grid-area: card_4;
    }
    .card_5{
        grid-area: card_5;
    }


}

@media (min-width:1100px){
  
    .container{
        grid-template-columns: repeat(4, 1fr);
        grid-template-areas:
            "card_1 card_1 card_2 card_5"
            "card_3 card_4 card_4 card_5";
    }

}

@media (hover: hover) {

    .attribution a:hover {
        color: rgb(0, 0, 255);
    }
}