@use 'sass:math';

$grid-gap: math.div(32, 1440) * 100%;

.content-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-gap: $grid-gap;
}

.grid-2-8 {
  grid-column: 2 / 8;
}
.grid-2-10 {
  grid-column: 2 / 10;
}
.grid-8-12 {
  grid-column: 8 / 12;
}
.grid-3-11 {
  grid-column: 3 / 11;
}
.grid-2-12 {
  grid-column: 2 / 12;
}
.grid-1-2 {
  grid-column: 1 / 2;
}
.grid-1-3 {
  grid-column: 1 / 3;
}

@media only screen and (max-width: $breakpoint-small) {
  .content-grid {
    display: block;
  }
}

.content-row {
  display: flex;
  flex-direction: row;

  .content-cell {
    flex: 1;
  }
}
