vault-frontend/src/components/flow/FlowGrid/styles.scss

$cols: $content_width / $cell;

.grid {
  padding: $gap / 2;
  margin: 0 (-$gap / 2);
}

.grid_test {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax($cell, 1fr));
  grid-template-rows: 50vh $cell;
  grid-auto-rows: $cell;
  grid-auto-flow: row dense;
  grid-column-gap: $grid_line;
  grid-row-gap: $grid_line;

  @include tablet {
    padding: 0 $gap;
  }

  @media (max-width: $cell * 6) {
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: 50vh 20vw;
    grid-auto-rows: 20vw;
  }

  @media (max-width: $cell * 5) {
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: 40vh 25vw;
    grid-auto-rows: 25vw;
  }

  @media (max-width: $cell * 4) {
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: 40vh 33vw;
    grid-auto-rows: 33vw;
  }

  @media (max-width: $cell * 3) {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: 40vh 50vw;
    grid-auto-rows: 50vw;
  }

  @media (max-width: $cell * 2) {
    grid-template-columns: repeat(1, 1fr);
    grid-template-rows: 40vh 75vw;
    grid-auto-rows: 75vw;
    grid-column-gap: $gap;
    grid-row-gap: $gap;
  }
}

.pad_last {
  grid-column-end: $cols + 1;
}

.hero {
  grid-row-start: 1;
  grid-row-end: span 1;
  grid-column-start: 1;
  grid-column-end: -1;
  // gridRow: "1 / 2",
  // gridColumn: "1 / -1",
  background: darken($content_bg, 2%);
  border-radius: $radius;
  // height: 33vh;
  display: flex;
  align-items: center;
  justify-content: center;
  font: $font_24_semibold;
}

.stamp {
  // grid-row: -1 / 3;
  grid-row-end: span 3;
  grid-column: -2 / -1;
  background: darken($content_bg, 8%);
  border-radius: $radius;
  padding: $gap;
  display: flex;
  align-items: center;
  justify-content: center;
  font: $font_24_semibold;
}