avelocontrelamuco.org layout

_layout.scss

$margins: 1rem;
$columns: 7fr 4fr 3fr 4fr 4fr;

@function x($i) {
  @return calc(#{$i} * ((100vw - #{$margins * 2}) / 22));
}

@function y($i) {
  @return calc(#{$i} * ((100vw - #{$margins * 2}) / 22) / 1.618);
}

.container {
  position: relative;
  margin-left: $margins;
  margin-right: $margins;
  display: grid;
  grid-template-columns: $columns;
}

@mixin md {
  @media (min-width: 660px) { @content; }
}

@mixin lg {
  @media (min-width: 770px) { @content; }
}

@mixin xl {
  @media (min-width: 1024px) { @content; }
}

.col- {
  @for $a from 1 through length($columns) {
    &#{$a} { grid-column: $a; }
    @for $b from 1 through length($columns) {
      &#{$a}-#{$b} { grid-column: $a / span $b; }
    }
  }

  @include md {
    @for $a from 1 through length($columns) {
      &md-#{$a} { grid-column: $a; }
      @for $b from 1 through length($columns) {
        &md-#{$a}-#{$b} { grid-column: $a / span $b; }
      }
    }
  }

  @include lg {
    @for $a from 1 through length($columns) {
      &lg-#{$a} { grid-column: $a; }
      @for $b from 1 through length($columns) {
        &lg-#{$a}-#{$b} { grid-column: $a / span $b; }
      }
    }
  }

  @include xl {
    @for $a from 1 through length($columns) {
      &xl-#{$a} { grid-column: $a; }
      @for $b from 1 through length($columns) {
        &xl-#{$a}-#{$b} { grid-column: $a / span $b; }
      }
    }
  }
}