/* ---- Wrapper ---- */

.cms-row__wrapper {
  padding: 1rem;
}

/* ---- Block ---- */

.cms-row {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
}

.cms-row__column {
  padding: 1rem;
  min-width: 0;
}

/* ---- Width modifier ---- */

.cms-row--centered {
  max-width: 1400px;
  margin: 0 auto;
}

/* ---- Divider ---- */

.cms-row--divider {
  gap: 0;
}

/* ---- Layout modifiers (desktop) ---- */

@media (min-width: 1024px) {
  .cms-row--mono-column {
    grid-template-columns: 1fr;
  }

  .cms-row--di-column {
    grid-template-columns: repeat(2, 1fr);
  }

  .cms-row--tri-column {
    grid-template-columns: repeat(3, 1fr);
  }

  .cms-row--quad-column {
    grid-template-columns: repeat(4, 1fr);
  }

  .cms-row--penta-column {
    grid-template-columns: repeat(5, 1fr);
  }

  .cms-row--hexa-column {
    grid-template-columns: repeat(6, 1fr);
  }

  .cms-row--primary-right {
    grid-template-columns: 15rem 1fr;
  }

  .cms-row--primary-left {
    grid-template-columns: 1fr 15rem;
  }

  .cms-row--primary-center {
    grid-template-columns: 15rem 1fr 15rem;
  }
}