_grid.scss

body {
  //Nested grid layout, first grid has 3 rows, header, main and footer.
  display: grid; //Gave these elements grids of their own in case positioning of items needs to change
  grid-template-rows: repeat(3, auto);    //Global grid that keeps the semantic elements in what will 
  grid-template-areas:                    //their set layout on any screen size
    "header"
    "main"
    "footer";

  .head-section {
    display: grid;
    grid-template-rows: repeat(3, auto);
  }

  .about {
    display: grid;
    grid-template-rows: repeat(4, auto);
  }

  

  .portfolio {
    display: grid;
    grid-template: repeat(7, auto) / 3fr 2fr;

    &__title {
      grid-area: 1 / 1 / 2 / 3;
    }

    &__project--one {
      grid-area: 2 / 1 / 3 / 3;
    }

    &__text--one {
      grid-area: 3 / 1 / 4 / 2;
    }

    &__project--two {
      grid-area: 4 / 1 / 5 / 3;
    }

    &__text--two {
      grid-area: 5 / 1 / 6 / 2;
    }

    &__project--three {
      grid-area: 6 / 1 / 7 / 3;
    }

    &__text--three {
      grid-area: 7 / 1 / 8 / 2;
    }
  }

  .contact {
    display: grid;
    grid-template-rows: repeat(2, auto);
  }

  .footer {
    display: grid;
    grid-template-rows: 1fr;
    grid-template-columns: 2fr 1fr 2fr; //brings the logos closer due to code in _footer.scss
  }
}

@media screen and (min-width: 768px) {

  body{

    .head-section {
      grid-template: 120px repeat(2, auto)/ repeat(5, 1fr);

      &__title {
        grid-area: 1 / 1/ 2 / 4;
      }

      &__navigation {
        grid-area: 1 / 4 / 2 / 6;
      }

      &__subheader {
        grid-area: 2 / 1 / 3 / 6;
      }

      &__info {
        grid-area: 3 / 1 / 4 / 4;
      }
    }

    .about {
      grid-template: repeat(3, auto) / repeat(2, auto);

      &__title {
        grid-area: 1 / 1 / 2 / 3;
      }

      &__image {
        grid-area: 2 / 1 / 3 / 2;
      }

      &__info--paragraph-1 {
        grid-area: 2 / 2 / 3 / 3;
      }

      &__info--paragraph-2 {
        grid-area: 3 / 1 / 4 / 3;
      }
    }

    .skills {
      display: grid;
      grid-template: auto 2fr 2fr / 1fr repeat(9, 2fr) 1fr;

      &__title {
        grid-area: 1 / 1 / 2 / 4;
      }

      &__info {
        grid-area: 1 / 4 / 2 / -1;
      }

      &__svg--github {
        grid-area: 2 / 2 / 3 / 3;
        
      }

      &__svg--html5 {
        grid-area: 3 / 2 / 4 / 3;
      }

      &__svg--css3 {
        grid-area: 2 / 4 / 3 / 5;
      }

      &__svg--javascript {
        grid-area: 3 / 4 / 4 / 5;
      }

      &__svg--scss {
        grid-area: 2 / 6 / 3 / 7;
      }

      &__svg--bem {
        grid-area: 3 / 6 / 4 / 7;
      }

      &__svg--react {
        grid-area: 2 / 8 / 3 / 9;
      }

      &__svg--java {
        grid-area: 3 / 8 / 4 / 9;
      }

      &__svg--springboot {
        grid-area: 2 / 10 / 3 / 11;
      }
    }

    .portfolio {
      grid-template: repeat(5, auto) / 3fr 2fr 3fr 2fr;
      gap: 10px;

      &__title {
        grid-area: 1 / 1 / 2 / 5;
      }
      
      &__project--one {
        grid-area: 2 / 1 / 3 / 3;
      }

      &__project--two {
        grid-area: 2 / 3 / 3 / 5;
      }

      &__text--one {
        grid-area: 3 / 1 / 4 / 2;
      }

      &__text--two {
        grid-area: 3 / 3 / 4 / 4;
      }

      &__project--three {
        grid-area: 4 / 1 / 5 / 3;
      }

      &__project--four {
        grid-area: 4 / 3 / 5 / 5;
      }

      &__text--three {
        grid-area: 5 / 1 / 6 / 2;
      }

      &__text--four {
        grid-area: 5 / 3 / 6 / 4;
      }
    }

    .footer {
      grid-template: 1fr / 1fr 15% 1fr;
    }
  }
}

@media screen and (min-width: 1024px) {

  body {
    .head-section {
      grid-template: 16% 32% 52% /  5% repeat(6, 1fr) 5%;

      &__title {
        grid-area: 1 / 1 / 2 / 5;
      }

      &__navigation {
        grid-area: 1 / 6 / 2 / 9;
      }

      &__subheader {
        grid-area: 2 / 1 / 3 / 9;
      }

      &__info {
        grid-area: 3 / 1 / 4 / 5;
      }
    }  

    .about {
      grid-template: 60px repeat(3, 204px) / 60% 40%;
      // margin-top: 100px;
      // padding-top: 2rem;

      &__title {
        grid-area: 1 / 1 / 2 / 3;
      }

      &__image {
        grid-area: 1 / 2 / 4 / 3;
        place-items: center;
      }

      &__info--paragraph-1 {
        grid-area: 2 / 1 / 3 / 2;
      }

      &__info--paragraph-2 {
        grid-area: 3 / 1 / 4 / 2;
      }
    }

    .skills {
      display: grid;
      grid-template: auto 2fr 2fr / 1fr repeat(9, 2fr) 1fr;

      &__title {
        grid-area: 1 / 1 / 2 / 4;
      }

      &__info {
        grid-area: 1 / 4 / 2 / -1;
      }

      &__svg--github {
        grid-area: 2 / 2 / 3 / 3;
        
      }

      &__svg--html5 {
        grid-area: 3 / 3 / 4 / 4;
      }

      &__svg--css3 {
        grid-area: 2 / 4 / 3 / 5;
      }

      &__svg--javascript {
        grid-area: 3 / 5 / 4 / 6;
      }

      &__svg--scss {
        grid-area: 2 / 6 / 3 / 7;
      }

      &__svg--bem {
        grid-area: 3 / 7 / 4 / 8;
      }

      &__svg--react {
        grid-area: 2 / 8 / 3 / 9;
      }

      &__svg--java {
        grid-area: 3 / 9 / 4 / 10;
      }

      &__svg--springboot {
        grid-area: 2 / 10 / 3 / 11;
      }
    }


    .portfolio {
      grid-template: repeat(5, auto) / repeat(3, 3fr 2fr);
      column-gap: 40px;

      &__title {
        grid-area: 1 / 1 / 2 / -1;
      }

      &__project--one {
        grid-area: 2 / 1 / 3 / 3;
      }

      &__project--two {
        grid-area: 2 / 3 / 3 / 5;
      }

      &__project--three {
        grid-area: 2 / 5 / 3 / 7;
      }

      &__text--one {
        grid-area: 3 / 1 / 4 / 2;
      }

      &__text--two {
        grid-area: 3 / 3 / 4 / 4;
      }

      &__text--three {
        grid-area: 3 / 5 / 4 / 6;
      }

      &__project--four {
        grid-area: 5 / 1 / 6 / 3;
      }

      &__project--five {
        grid-area: 5 / 3 / 6 / 5;
      }

      &__project--six {
        grid-area: 5 / 5 / 6 / 7;
      }

      &__text--four {
        grid-area: 6 / 1 / 7 / 2;
      }

      &__text--five {
        grid-area: 6 / 3 / 7 / 4;
      }

      &__text--six {
        grid-area: 6 / 5 / 7 / 6;
      }

      &__button--one {
        grid-area: 3 / 2 / 4 / 3;
      }

      &__button--two {
        grid-area: 3 / 4 / 4 / 5;
      }

      &__button--three {
        grid-area: 3 / 6 / 4 / 7;
      }

      &__button--four {
        grid-area: 6 / 2 / 7 / 3;
      }

      &__button--five {
        grid-area: 6 / 4 / 7 / 5;
      }

      &__button--six {
        grid-area: 6 / 6 / 7 / 7;
      }
    }

    .footer {
      grid-template: 1fr / 1fr 10% 1fr;
    }
  }
}

@media screen and (min-width: 1440px) {
  
  body {
    
    .head-section {
      grid-template: 16% (repeat(2, 44%) / 5% repeat(6, 1fr) 5%);
    
    }

    .about {
      grid-template: 80px 60px repeat(3, 204px) / 60% 40%;
      margin-top: 0px;

      &__title {
        grid-area: 1 / 1 / 2 / 3;
      }

      &__image {
        grid-area: 1 / 2 / 6 / 3;
        place-items: center;
      }

      &__info--paragraph-1 {
        grid-area: 3 / 1 / 4 / 2;
      }

      &__info--paragraph-2 {
        grid-area: 4 / 1 / 5 / 2;
      }
    }

    .portfolio {
      column-gap: 50px;
      row-gap: 0px;

      &__button--one {
        grid-area: 3 / 2 / 4 / 3;
      }

      &__button--two {
        grid-area: 3 / 4 / 4 / 5;
      }

      &__button--three {
        grid-area: 3 / 6 / 4 / 7;
      }

      &__button--four {
        grid-area: 6 / 2 / 7 / 3;
      }

      &__button--five {
        grid-area: 6 / 4 / 7 / 5;
      }

      &__button--six {
        grid-area: 6 / 6 / 7 / 7;
      }
    }

    .footer {
      grid-template: 1fr / 1fr 10% 1fr;
    }

  }
}