*, *::before, *::after {
    box-sizing: border-box;
}
body{
    margin:0;
    font-size: 0.8125rem; /* 13px */
    background-color: whitesmoke;
    font-family: 'Barlow Semi Condensed', sans-serif;
}
.container{
    width: 90%;
    max-width: 1100px;
    margin:5em auto;
}
.row{
    display: flex;
    gap: 2em;
    align-items: center;
}
.col{
    padding: 2em;
    border-radius: 1em;
    margin-top:2em;
}

.col__title, .col__title2, .col__title4{
    color:  hsl(0, 0%, 100%);
    letter-spacing: 1px;
}
.col__title3, .col__title5{
    color: hsl(217, 19%, 35%);
}

.col__desc, .col__desc2, .col__desc4{
    color: hsl(0, 0%, 100%);
    opacity: 50%;
}
.col__desc3, .col__desc5{
    color: hsl(217, 19%, 35%);
    opacity: 50%;
}
.col__body, .col__body2, .col__body4{
    color: hsl(0, 0%, 100%);
    opacity: 70%;
    line-height: 1.5;
}
.col__body3, .col__body5{
    color: hsl(217, 19%, 35%);
    opacity: 70%;
    line-height: 1.5;
}

.col__profile, .col__profile4{
    border-radius: 3em;
    border:2px solid  hsl(263, 74%, 65%);
}
.col__profile2{
    border-radius: 3em;
    border:2px solid hsl(217, 20%, 22%);
}
.col__profile3, .col__profile5{
    border-radius: 3em;
}

.col__author, .col__author2, .col__author4{
    color: hsl(0, 0%, 100%);
}
.col__author3, .col__author5{
    color: hsl(217, 19%, 35%);
}

.col:nth-child(1){
    background: url('./images/bg-pattern-quotation.svg') no-repeat;
    background-position: 25em 0;
    background-color: hsl(263, 55%, 52%);
}
.col:nth-child(2){
    background-color:hsl(217, 19%, 35%);
}
.col:nth-child(3){
    background-color:hsl(0, 0%, 100%);
}
.col:nth-child(4){
    background-color:hsl(219, 29%, 14%);
}
.col:nth-child(5){
    background-color:hsl(0, 0%, 100%);
}

.grid{
    display: grid;
    gap: 1em;
    grid-template-columns: 1fr 1fr 1fr 1fr;
}

.col1{
    grid-column: 1/3;
}
.col3{
    grid-column: 1/2;
}
.col4{
    grid-column: 2/4;
}
.col5{
    grid-column: 4/5;
    grid-row: 1/3 ;
}

/* Screen Size */

@media (min-width:600px) and (max-width:850px) {
    .col:nth-child(1){
        background-position: 9em 0;
    }
}

@media (max-width:600px) {
    .grid{
        grid-template-columns: 1fr;   
    }
    .col1, .col2, .col3, .col4{
        grid-column: 1/-1;
    }
    .col5{
        grid-row: 5/6;
        grid-column: 1/-1;
    }
    .col:nth-child(1){
        background-position: 13.6em 0;
    }
}
.attribution { font-size: 1rem; text-align: center; }
.attribution a { 
    color: hsl(228, 45%, 44%);
    text-decoration: none;
 }