.row {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  row-gap: calc(var(--tateru-default-padding) / 2);
  column-gap: 0;
}

.row > * {
  width: 100%;
  grid-column: span 12;
}

.col-mobile-1 {
  grid-column: span 1;
}

.col-mobile-2 {
  grid-column: span 2;
}

.col-mobile-3 {
  grid-column: span 3;
}

.col-mobile-4 {
  grid-column: span 4;
}

.col-mobile-5 {
  grid-column: span 5;
}

.col-mobile-6 {
  grid-column: span 6;
}

.col-mobile-7 {
  grid-column: span 7;
}

.col-mobile-8 {
  grid-column: span 8;
}

.col-mobile-9 {
  grid-column: span 9;
}

.col-mobile-10 {
  grid-column: span 10;
}

.col-mobile-11 {
  grid-column: span 11;
}

.col-mobile-12 {
  grid-column: span 12;
}

@media screen and (max-width: 599px) {
  .show-on-desktop-only {
    display: none;
  }

  .show-on-tablet-only {
    display: none;
  }

  .hide-on-mobile {
    display: none;
  }
}

@media screen and (min-width: 600px) {
  .row {
    column-gap: calc(var(--tateru-default-padding) / 2);
  }
}

@media screen and (min-width: 600px) and (max-width: 1000px) {
  .col-tablet-1 {
    grid-column: span 1;
  }

  .col-tablet-2 {
    grid-column: span 2;
  }

  .col-tablet-3 {
    grid-column: span 3;
  }

  .col-tablet-4 {
    grid-column: span 4;
  }

  .col-tablet-5 {
    grid-column: span 5;
  }

  .col-tablet-6 {
    grid-column: span 6;
  }

  .col-tablet-7 {
    grid-column: span 7;
  }

  .col-tablet-8 {
    grid-column: span 8;
  }

  .col-tablet-9 {
    grid-column: span 9;
  }

  .col-tablet-10 {
    grid-column: span 10;
  }

  .col-tablet-11 {
    grid-column: span 11;
  }

  .col-tablet-12 {
    grid-column: span 12;
  }

  .show-on-desktop-only {
    display: none;
  }

  .show-on-mobile-only {
    display: none;
  }

  .hide-on-tablet {
    display: none;
  }
}

@media screen and (min-width: 1001px) {
  .col-desktop-1 {
    grid-column: span 1;
  }

  .col-desktop-2 {
    grid-column: span 2;
  }

  .col-desktop-3 {
    grid-column: span 3;
  }

  .col-desktop-4 {
    grid-column: span 4;
  }

  .col-desktop-5 {
    grid-column: span 5;
  }

  .col-desktop-6 {
    grid-column: span 6;
  }

  .col-desktop-7 {
    grid-column: span 7;
  }

  .col-desktop-8 {
    grid-column: span 8;
  }

  .col-desktop-9 {
    grid-column: span 9;
  }

  .col-desktop-10 {
    grid-column: span 10;
  }

  .col-desktop-11 {
    grid-column: span 11;
  }

  .col-desktop-12 {
    grid-column: span 12;
  }

  .show-on-tablet-only {
    display: none;
  }

  .show-on-mobile-only {
    display: none;
  }

  .hide-on-desktop {
    display: none;
  }
}