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

/* ### Primary */
--Moderate-violet: hsl(263, 55%, 52%);
--Very-dark-grayish-blue: hsl(217, 19%, 35%);
--Very-dark-blackish-blue: hsl(219, 29%, 14%);
--White: hsl(0, 0%, 100%);

/* ### Neutral */
--Light-gray: hsl(0, 0%, 81%);
--Light-grayish-blue: hsl(210, 46%, 95%);
}

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

body {
    min-height: 100vh;
    font-family: 'Barlow Semi Condensed', sans-serif;
    font-size: 13px;
    background-color:  hsl(210, 46%, 95%);
    display: flex;
    justify-content: center;
    align-items: center;
    line-height: 1.1rem;
}

.container {
    /* height: 90vh; */
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(2, min-content);
    gap: 30px;
    max-width: 1100px;
    /* align-items: center;  */
    margin: 0 auto;
    padding: 0 30px;
    /* grid-template-areas: 
    "card1 card1 card2 card5"
    "card3 card4 card4 card5"
    ; */
}



.item {
    border-radius: 10px;
    padding: 25px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    box-shadow: 5px 5px 10px 3px rgba(0,0,0,0.4);
    box-shadow: 0 10px 20px rgba(0,0,0,0.3);
}

.item h4 {
    font-size: 18px;
    margin-bottom: 15px;
    line-height: 1.3rem;
}

.item-3 h4 {
    max-width: 150px;
}


span {
    display: block;
    color: rgba(255, 255, 255, 0.5);
}

.item p:nth-child(3){
    color: rgba(255, 255, 255, 0.7);
    font-size: 12px;
}

.item-3 span ,
.item-5 span {
    color: hsla(217, 19%, 35%, 0.5);
}

.item-3  p:nth-child(3),
.item-5  p:nth-child(3){
    color: hsla(217, 19%, 35%, 0.715);
}

.item-1{
    grid-column: 1 /3;
    background-color: hsl(263, 55%, 52%);
    color: white;
    /* grid-area: card1; */
}

.item-2 {
    background-color:  hsl(217, 19%, 35%);
    color: #fff;
    /* grid-area: card2; */

}
.item-3 {
    background-color: #fff;
    /* grid-area: card3; */

}

.item-4 {
    grid-column: 2/4;
    background-color: hsl(219, 29%, 14%);
    color: white;
    /* grid-area: card4; */
}

.item-5 {
    grid-row: 1/3;
    grid-column: 4/5;
    background-color: #fff;
    /* grid-area: card5; */

}

.profile {
    display: flex;
    align-items: center;
    font-size: 12px;
    margin-bottom: 15px;
}

.profile .person-img {
    width: 35px;
    border-radius: 50px;
    margin-right: 15px;
    border: 2px solid hsl(263, 55%, 66%);
}

.item-3 .profile img,
.item-5 .profile img {
    border: none;
}

.item-2 .profile img {
    border: 2px solid hsl(217, 19%, 55%);
}

.item-1 {
    background-image: url(./images/bg-pattern-quotation.svg);
    background-repeat: no-repeat;
    background-position: top right 75px;
}

/* @media only screen and (max-width: 900px) {
    .container {
        height: 100vh;
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        grid-template-rows: repeat(5, 1fr);
        gap: 30px;
        padding: unset;
        margin: unset;
    }

    .item {
        max-width: 320px;
    }

    p:nth-child(3) {
        max-width: 260px;
    }

    .item-3 p:nth-child(3)  {
        max-width: 240px;
    }

    .item-1 {
        margin-top: 60px;
    }
    .item-5 {
        margin-bottom: 60px;
    }



    .item-1,
    .item-4,
    .item-5{
        grid-column: unset;
        grid-row: unset;
    }

  
} */
@media only screen and (max-width: 900px) {
 
.container {
    grid-template-columns: repeat(3,1fr);
    grid-template-rows: repeat(3, min-content);
    width: 95%;
    gap: 15px;
    padding: 60px 30px;
}

.item-1 {
    grid-column: 1/3;
}
.item-2 {
    grid-column: 3/4;
}
.item-5 {
    grid-column: 1/4;
    grid-row: 3/4;
}

}

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

    .container {

        /* grid-template-columns: repeat(1, 1fr); */
        /* grid-template-rows: repeat(5, 1fr); */
        grid-template-columns: repeat(1,1fr);
        justify-items: center;

    }
    .item {
        grid-column: unset;
        grid-row: unset;
        max-width: 270px;
    }


}