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

      .col-s-1 {grid-column-end: span 1;}
      .col-s-2 {grid-column-end: span 2;}
      .col-s-3 {grid-column-end: span 3;}
      .col-s-4 {grid-column-end: span 4;}
      .col-s-5 {grid-column-end: span 5;}
      .col-s-6 {grid-column-end: span 6;}
      .col-s-7 {grid-column-end: span 7;}
      .col-s-8 {grid-column-end: span 8;}
      .col-s-9 {grid-column-end: span 9;}
      .col-s-10 {grid-column-end: span 10;}
      .col-s-11 {grid-column-end: span 11;}
      .col-s-12 {grid-column-end: span 12;}

      .off-s-0{grid-column-start: 1;}
      .off-s-1{grid-column-start: 2;}
      .off-s-2{grid-column-start: 3;} 
      .off-s-3{grid-column-start: 4;}
      .off-s-4{grid-column-start: 5;}
      .off-s-5{grid-column-start: 6;}
      .off-s-6{grid-column-start: 7;}
      .off-s-7{grid-column-start: 8;}
      .off-s-8{grid-column-start: 9;}
      .off-s-9{grid-column-start: 10;}
      .off-s-10{grid-column-start: 11;}
      .off-s-11{grid-column-start: 12;}
      .off-s-12{grid-column-start: 13;}

 

h1{
  font-size: 1rem;
}

.header a{
  color: var(--color-pink);
}

.menu{
  width: 80%;
  margin-left: 20%;
  display: flex;
  justify-content: space-between;
  padding-left: .5%;
  font-size: .8rem;
}

section img{
  margin-bottom: 2rem;
}

section,
h2{
  margin-bottom: 3rem;
}


@keyframes weightPulse {
  from {
    font-variation-settings: 'wght' 0;
  }
  to {
    font-variation-settings: 'wght' 400;
  }
}


h2{
  font-variation-settings: 'wght' 0;
  animation: weightPulse 5s infinite alternate ease-in-out;
  }


}