@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&family=Outfit:wght@100..900&display=swap');

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

body{
    margin: 0;
    min-height: 100vh;
    background-color: hsl(214, 17%, 92%);
    font-size: 13px;
    font-family: "Outfit", sans-serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.container {
    display: grid;
    grid-template-areas: 'one' 'two' 'three' 'four' 'five';
    gap:1rem;
    margin:5rem;
    max-width: min(95%,70rem);
    
}
.container > *{
    border-radius: 1rem;
    padding: 1rem;
    box-shadow: 15px 15px 10px  5px hsla(0, 0%, 10%,0.1);
}
.container > :nth-child(1){
    /* grid-column: span 2; */
    background-image: url(./images/bg-pattern-quotation.svg);
    background-position: right top;
    background-repeat: no-repeat;
    background-size: 2rem 3rem;
    background-color: hsl(263, 55%, 52%);
    grid-area: one;
    
}
.container > :nth-child(2){
   background-color: hsl(224, 10%, 45%);
   grid-area: two;
}
.container > :nth-child(3){
    background-color: hsl(0, 0%, 100%);
    color: hsl(217, 19%, 35%);
    grid-area: three;
     h2{
        color: hsl(217, 19%, 35%)
    }
}
.container > :nth-child(5){
    grid-area: five;
    background-color: hsl(0, 0%, 100%);
    color: hsl(217, 19%, 35%);
    h2{
        color: hsl(217, 19%, 35%)
    }
}
.container > :nth-child(4){
    grid-area: four;
     background-color: hsl(219, 29%, 14%);
}.container > :nth-child(1),:nth-child(2),:nth-child(5){
    color: hsl(214, 17%, 92%);
}
 img{
    width:3rem;
    height: 3rem;
    border-radius: 50%;
    object-fit: cover;
}
.head{
    display: flex;
    align-items:center;
    gap:1rem;
}
article{
    display: flex;
    flex-direction: column;
    gap:1rem;
}
@media (min-width:720px){
    .container{
        grid-template-areas: 'one one two five' 'three four four five';
    gap:1rem;
    margin:5rem;
    }
    /* .container > :nth-child(1),:nth-child(4){
        grid-column: span 2;
    }
    .container > :nth-child(5){
        grid-column-start: 4;
        grid-row: 1/span 2;
    } */
   
}