style.css

  @import url("https://fonts.google.com/specimen/Barlow+Semi+Condensed");
  .attribution { font-size: 11px; text-align: center; }
  .attribution a { color: hsl(228, 45%, 44%); }
  *{
    font-family: 'Barlow Semi Condensed';
  }
  body{
    display:grid;
    grid-template-columns: 25% 25% 25% 25%;
    column-gap: 10px;
    row-gap:10px;
    grid-template-rows: auto auto;
    margin:5%;
    grid-template-areas:'card1 card1 card2 card5'
    'card3 card4 card4 card5';
    
  }
  .card1{
    background-color: hsl(263, 55%, 52%);
    color:white;
    border-radius: 10px;
    padding:8px;
    grid-area:card1;
    
  }
  .card2{
    background-color: hsl(217, 19%, 35%);
    color:white;
    border-radius: 10px;
    padding:8px;
    grid-area:card2;
  }
  .card3{
    background-color: hsl(0, 0%, 100%);
    color:black;
    border-radius: 10px;
    padding:8px;
    grid-area:card3;
  }
  .card4{
   background-color: hsl(219, 29%, 14%);
   color:white;
   border-radius: 10px;
   padding:8px;
  grid-area:card4;
  }
  .card5{
    background-color: hsl(0, 0%, 100%);
    color:black;
    border-radius: 10px;
    padding:8px;
    grid-area:card5;
  }
  img{
      border-radius:100%;
      float:left;
      
      margin-left:20px;
      margin-top:17px;
      margin-right:10px;
      height:40px;
      border:2px solid white;
  }
  .name{
      font-weight: 600;
      padding:5px;
      
      font-size:13px;
      margin-top:15px;
      text-align:left;

  }
  .describe{
    
    opacity:50%;
  }
  .heading{
    margin-bottom:20px;
    margin-left:20px;
    margin-right:20px;
    font-size:12px;
  }
  
  .content{
    font-size:10px;
    opacity:70%;
    margin-bottom:15px;
    margin-left:15px;
    margin-right:15px;


  }
 @media screen and (max-width:375px){
  body{
    grid-template-columns: none;
    grid-template-rows: auto;
    grid-template-areas: 'card1'
    'card2'
    'card3'
    'card4'
    'card5';
  }
 
 }