*{
    margin: 0;
    padding: 0;
    font-size: 15px;
    font-family: 'inter', sans-serif;
}

.item1 { grid-area: item1; }
.item2 { grid-area: item2; }
.item3 { grid-area: item3; }
.item4 { grid-area: item4; }
.item5 { grid-area: item5; }
.item6 { grid-area: item6; }
.item7 { grid-area: item7; }
.item8 { grid-area: item8; }
.item9 { grid-area: item9; }

.parent {
  display: grid;
  grid-template-areas:
    'item1 item1 item2 item2 item2 item2'
    'item3 item3 item3 item4 item4 item4'
    'item3 item3 item3 item4 item4 item4'
    'item3 item3 item3 item4 item4 item4'
    'item3 item3 item3 item4 item4 item4'
    'item5 item5 item6 item4 item4 item4'
    'item7 item7 item8 item8 item9 item9';
  gap: 20px;
  padding: 50px;
  margin-left: 60px;
}

.item2{
    display: flex;
    justify-content: center;
    align-items: center;
    padding-left: 20rem;
}

.item2 img{
    visibility: hidden;
  }

#menu a{
    color: hsl(233, 8%, 79%);
    text-decoration: none;
    padding: 1rem;
}

.img{
    width: 100%;
    height: 20rem;
}

.item4{
    border: 1px solid gray;
    background-color: hsl(240, 100%, 5%);
    color: hsl(36, 100%, 99%);
    width: 20rem;
    height: 29.5rem;
    padding: 1rem;
}

.item4 h2{
    color: hsl(35, 77%, 62%);
    font-size: 30px;
    padding: 1rem 0 2rem 0;
}

.item4 h3{
    padding: 0;
    margin-bottom: 1rem;
}

.item4 p{
    align-items:start;
    padding-bottom: 2rem;
    border-bottom: 1px solid hsl(236, 13%, 42%);
    color: hsl(236, 13%, 42%);
    margin-bottom: 2rem;
}

#borderNone{
    border: none;
}

.item5 h1{
    font-size: 45px;
    font-weight: 800;
    align-items: center;
    width: 20rem;
    height: 12rem;
}

.item6 p{
    color: hsl(236, 13%, 42%);
    width: 23rem;
    height: 7rem;
    text-align: start;
}

.item6 button{
    background-color: hsl(5, 85%, 63%);
    padding: 1rem 3rem;
    border: none;
    color: hsl(36, 100%, 99%);
    letter-spacing: 2px;
}

.item7 img{
    display: inline;
    width: 23%;
    float: left;
    margin-right: 1rem;
}

.item8 img{
    display: inline;
    width: 20%;
    float: left;
    margin-right: 1rem;
}

.item9 img{
    display: inline;
    width: 25%;
    float: left;
    margin-right: 1rem;
}

.item7 h1{
    color: hsl(233, 8%, 79%);
    margin-bottom: 1rem;
    font-size: 30px;
}

.item7 h2{
    margin-bottom: 1rem;
}

.item7 p{
    color: hsl(236, 13%, 42%);
    font-size: 13px;
    width: 20rem;
}

.item8 h1{
    color: hsl(233, 8%, 79%);
    margin-bottom: 1rem;
    font-size: 30px;
}

.item8 h2{
    margin-bottom: 1rem;
}

.item8 p{
    color: hsl(236, 13%, 42%);
    font-size: 13px;
    width: 20rem;
}

.item9 h1{
    color: hsl(233, 8%, 79%);
    margin-bottom: 1rem;
    font-size: 30px;
}

.item9 h2{
    margin-bottom: 1rem;
}

.item9 p{
    color: hsl(236, 13%, 42%);
    font-size: 13px;
    width: 20rem;
}



/* MOBILE*/

@media screen and (max-width: 375px) {

    .parent {
        display: grid;
        grid-template-areas:
          'item1 item2'
          'item3 item3'
          'item5 item5'
          'item6 item6'
          'item4 item4'
          'item7 item7'
          'item8 item8'
          'item9 item9';
        row-gap: 15px; 
      }

      .item2 nav{
        visibility: hidden;
      }

      .navBar img{
        padding-right: 9rem;
      }

      .item2 img{
        visibility: visible;
      }

      header{
        padding-top: 2rem;
      }

      .img{
        width: 80%;
        height: 22rem;
    }

    .item7 img{
        width: 25%;
    }

    .item8 img{
        width: 25%;
    }

}