<div class="grid">
	<div class="item subgrid-desktop-1-6 subgrid-tablet-1-12 subgrid-mobile-1-6">
		<div class="item grid-desktop-1-5"></div>
	</div>
	<div class="item grid-desktop-7-12 grid-tablet-1-12 grid-mobile-1-3"></div>
	<div class="item subgrid-desktop-3-8 subgrid-tablet-1-10 subgrid-mobile-1-6">
		<div class="item grid-desktop-1-3 grid-tablet-1-1 grid-mobile-1-1"></div>
		<div class="item grid-desktop-4-3 grid-tablet-3-5 grid-mobile-2-3"></div>
		<div class="item grid-desktop-5-6 grid-tablet-11-12 grid-mobile-4-6"></div>
	</div>
	<div class="item grid-desktop-1-12 grid-mobile-1-6"></div>
</div>

// Define the number of columns at each breakpoint
$grid-desktop-columns: 12;
$grid-tablet-columns: 12;
$grid-mobile-columns: 6;

// Define the max-width of the grid container at each breakpoint
$grid-desktop-width: 1440px;
$grid-tablet-width: 1024px;
$grid-mobile-width: 620px;

// Define the column width and gutter for the grid
$grid-column-width: 1fr;
$grid-gutter: 20px;

.grid {
  display: grid;
  grid-template-columns: repeat(12, $grid-column-width);
  grid-gap: $grid-gutter;
  padding: 0 50px;
  margin: 0 auto;
  max-width: $grid-desktop-width;
  width: 100%;

  @media only screen and (max-width: $grid-tablet-width) {
    padding: 0 40px;
  }

  @media only screen and (max-width: $grid-mobile-width) {
    grid-template-columns: repeat($grid-mobile-columns, $grid-column-width);
    padding: 0 20px;
    max-width: $grid-mobile-width;
  }
}

// MAIN GRID
@for $i from 1 through $grid-desktop-columns {
  @for $j from $i through $grid-desktop-columns {
    .grid-desktop-#{$i}-#{$j} {
      grid-column: #{$i} / span #{$j - $i + 1};
    }
  }
}

@for $i from 1 through $grid-tablet-columns {
  @for $j from $i through $grid-tablet-columns {
    .grid-tablet-#{$i}-#{$j} {
      @media only screen and (max-width: $grid-tablet-width) {
        grid-column: #{$i} / span #{$j - $i + 1};
      }
    }
  }
}

@for $i from 1 through $grid-mobile-columns {
  @for $j from $i through $grid-mobile-columns {
    .grid-mobile-#{$i}-#{$j} {
      @media only screen and (max-width: $grid-mobile-width) {
        grid-column: #{$i} / span #{$j - $i + 1};
      }
    }
  }
}

// SUBGRID
@for $i from 1 through $grid-desktop-columns {
  @for $j from $i through $grid-desktop-columns {
    .subgrid-desktop-#{$i}-#{$j} {
			display: grid;
			grid-template-columns: repeat($j - $i + 1, $grid-column-width);
      grid-gap: $grid-gutter;
      grid-column: #{$i} / span #{$j - $i + 1};
    }
  }
}

@for $i from 1 through $grid-tablet-columns {
  @for $j from $i through $grid-tablet-columns {
    .subgrid-tablet-#{$i}-#{$j} {
      @media only screen and (max-width: $grid-tablet-width) {
				display: grid;
				grid-template-columns: repeat($j - $i + 1, $grid-column-width);
				grid-gap: $grid-gutter;
        grid-column: #{$i} / span #{$j - $i + 1};
      }
    }
  }
}

@for $i from 1 through $grid-mobile-columns {
  @for $j from $i through $grid-mobile-columns {
    .subgrid-mobile-#{$i}-#{$j} {
      @media only screen and (max-width: $grid-mobile-width) {
				display: grid;
				grid-template-columns: repeat($j - $i + 1, $grid-column-width);
				grid-gap: $grid-gutter;
        grid-column: #{$i} / span #{$j - $i + 1};
      }
    }
  }
}