@mixin respond-to($breakpoint) {
    @if $breakpoint == small {
      @media (max-width: 600px) {
        @content;
      }
    }
  
    @if $breakpoint == medium {
      @media (max-width: 900px) {
        @content;
      }
    }
  
    @if $breakpoint == large {
      @media (min-width: 900px) {
        @content;
      }
    }
  }


main {
    @include respond-to(small) {
        padding-left: 5vw;
        padding-right: 5vw;
    }
    
    @include respond-to(medium) {
        padding-left: 10vw;
        padding-right: 10vw;
    }
    
    @include respond-to(large) {
        padding-left: 20vw;
        padding-right: 20vw;
    }
    
}