/* //////////////////////////////////////////////////////////////////////////////////////////////////// */
/* Grid - 1 to 3 Cols - 7 to 3 Rows */

.grid-1-to-3-cols-7-to-3-rows {
  box-sizing: border-box;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: repeat(7, auto);
  justify-content: center;
  justify-items: center;
  align-content: center;
  align-items: center;
  gap: 3.6rem;
  width: 100%;
  max-width: 120rem;
  padding: 0 2.4rem;
  margin: auto;
}

@media (min-width: 768px) {
  .grid-1-to-3-cols-7-to-3-rows {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(4, auto);
    align-content: stretch;
    align-items: stretch;
  }
}

@media (min-width: 1280px) {
  .grid-1-to-3-cols-7-to-3-rows {
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, auto);
    padding: 0;
  }
}

/* //////////////////////////////////////////////////////////////////////////////////////////////////// */
/* Grid - 1 to 3 Cols - 3 to 1 Rows */

.grid-1-to-3-cols-3-to-1-rows {
  box-sizing: border-box;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: repeat(3, auto);
  justify-content: center;
  justify-items: center;
  align-content: center;
  align-items: center;
  gap: 3.6rem;
  width: 100%;
  max-width: 120rem;
  padding: 0 2.4rem;
  margin: auto;
}

@media (min-width: 768px) {
  .grid-1-to-3-cols-3-to-1-rows {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, auto);
    align-content: stretch;
    align-items: stretch;
  }
}

@media (min-width: 1280px) {
  .grid-1-to-3-cols-3-to-1-rows {
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: auto;
    padding: 0;
  }
}