.wrap
  max-width: 1240px
  &, &
    width: 100%
    padding: 0 25px
    margin: 0 auto

@for $i from 1 through 4 
  $size: $i * 1.5rem
  $x-size: $size * 0.5 
  .pt-#{$i} 
    padding-top: $size
  
  .pb-#{$i} 
    padding-bottom: $size
  
  .mt-#{$i} 
    margin-top: $size
  
  .mb-#{$i} 
    margin-bottom: $size

%grid
  display: grid
  grid-template-columns: 1fr

[class*='grid-']
  grid-gap: 2rem

.grid-2, .grid-3, .grid-4, .grid-auto, .grid-reverse
  @extend %grid

@media screen and (min-width: 42rem)
  .grid-auto
    grid-template-columns: 2fr 5fr
  
  .grid-reverse
    grid-template-columns: 3fr 1fr
  
  .grid-2
    grid-template-columns: 1fr 1fr
  
  .grid-3 
    grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr))
  
  .grid-4 
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr))

.active
  color: var(--theme)