*{
    box-sizing: border-box;
}
@font-face {
    font-family: 'Barlow';
    src: url(../font/BarlowSemiCondensed-Regular.ttf);
}
body{
    font-family: Barlow;
    font-size: 13px;
    font-weight: 400;
}
h1{
    font-weight: 600;
}
body{
    background-color: hsl(210, 46%, 95%);
    display: flex;
    justify-content: center;
}
main{
    margin:30px 6px 20px 6px;
    display: flex;
    flex-direction: column;
    max-width:600px;
}
@media(min-width:950px){
    body{
    align-items: center;
    height: 98vh;
    }
    main{
        display: grid;
        gap: 25px;
        grid-template-columns: repeat(4,1fr);
        grid-template-rows: repeat(2,1fr);
        max-width: 1100px;
        margin-top: 0;
        margin-bottom: 0;
    }
}

.member{
    padding: 30px;
    padding-bottom: 20px;
    border-radius: 10px;
    color: rgba(255, 255, 255, 0.7);
}
.member {
    margin-bottom: 20px;
}
.member:first-of-type{
    grid-column:1/3 ;
    background: url(../images/bg-pattern-quotation.svg);
    background-repeat: no-repeat;
    background-color: hsl(263, 55%, 52%);
    background-position: 88% top;
}
.member:nth-of-type(2){
    background-color:hsl(217, 19%, 35%);
}
.member:nth-of-type(3){
    background-color: white;
    color: hsla(217, 19%, 35%, 0.7);
}
.member:nth-of-type(5){
    grid-row: 1/3;
    grid-column: 4;
    background-color: white;
    color:hsla(217, 19%, 35%, 0.7);
}
h1 , .name{
    color: white;
}
.member:nth-of-type(3) h1,.member:nth-of-type(5) h1, .member:nth-of-type(3) .name,.member:nth-of-type(5) .name{
    color:hsla(217, 19%, 35%);
}
.member .graduate{
    color: rgba(255, 255, 255, 0.5);
}
.member:nth-of-type(3) .graduate,.member:nth-of-type(5) .graduate{
    color: hsla(217, 19%, 35%, 0.5);
}
.member:nth-of-type(4){
    grid-column:  2/4;
    background-color: hsl(219, 29%, 14%);
}
.member-info{
    display: flex; 
    margin-bottom: 10px; 
}
.member-info > div{
    margin-left: 15px;
}
img{
    width:40px;
    border-radius: 50%;
}
.member p{
    margin-bottom: 0;
}