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

html {
    background-color: hsl(0, 0%, 81%);
   
} 
body {
    padding: 0;
    width: 375px;
    margin: auto;
    font-family: 'Barlow Semi Condensed', sans-serif;
}

section {
    border-radius: 15px;
    margin: 30px auto;
} 

section > div {
    display: flex;
    align-items: center;
}

p {
    font-weight: 600;
}

img {
    border-radius: 50%;
    border: 3px solid rgb(192, 184, 184);
    margin-bottom: 20px;
    margin-right: 25px;
}

div div {
    line-height: .3;
}

div p {
 color: hsl(0, 0%, 81%);
}

div p:last-child {
    opacity: 50%;
}

.card-1 {
    background-color:  hsl(263, 55%, 52%);
    padding: 30px;
    color: hsl(0, 0%, 100%);
} 

.p-2 {
    opacity: 70%;
}

.card-2 {
    background-color: hsl(217, 19%, 35%);
    padding: 30px;
    color: hsl(0, 0%, 100%);
}

.card-3 {
    background-color: hsl(0, 0%, 100%);
    padding: 30px;
    color: #000
}
.card-4 {
    background-color: hsl(219, 29%, 14%);
    padding: 30px;
    color: hsl(0, 0%, 100%);
}

.card-5 {
    background-color: hsl(0, 0%, 100%);
    padding: 30px;
    color: #000
}

@media screen and (min-width: 1440px) {
   body {
       width: 1440px;
   }
   
    article {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr;
        gap: 20px;
        margin: 10px auto;
    }

    section {
        margin: 0 auto;
    } 
    

    .card-1 {
        grid-column: 1/3;
        grid-row: 1;
    }

    .card-2 {
        grid-column: 3;
        grid-row: 1;
    }

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

    .card-3 {
        grid-column: 1;
        grid-row: 2;
    }

    .card-4 {
        grid-column: 2/4;
        grid-row: 2;
    }
}