.columns {
  display: grid;
  word-break: break-word;
  grid-gap: var(--si-space-28);
  gap: var(--si-space-28);
}
.columns > * {
  min-width: 0; /* critical for proper overflow handling */
  word-break: break-word; /* or break-all */
  height: -moz-fit-content;
  height: fit-content; /* prevent from vertical stretching */
}
@media (min-width: 768px) {
  .columns {
    gap: var(--si-space-28) var(--si-space-40);
  }
}
.columns.columns--gap-small {
  gap: var(--si-space-28);
}
@media (min-width: 1024px) {
  .columns.columns--gap-small {
    gap: var(--si-space-28) 2rem;
  }
}
.columns.columns--gap-medium {
  gap: var(--si-space-28);
}
@media (min-width: 768px) {
  .columns.columns--gap-medium {
    gap: var(--si-space-40) var(--si-space-60);
  }
}
.columns.columns--gap-large {
  gap: var(--si-space-28);
}
@media (min-width: 768px) {
  .columns.columns--gap-large {
    gap: var(--si-space-60) var(--si-space-100);
  }
}
.columns.columns--mobile-reverse > *:first-child {
  order: 2;
}
@media (min-width: 1440px) {
  .columns.columns--mobile-reverse > *:first-child {
    order: inherit;
  }
}
.columns.columns--2-column:not(.columns--25-75):not(.columns--75-25):not(.columns--65-35):not(.columns--35-65) {
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 768px) {
  .columns.columns--2-column:not(.columns--25-75):not(.columns--75-25):not(.columns--65-35):not(.columns--35-65) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .columns.columns--2-column:not(.columns--25-75):not(.columns--75-25):not(.columns--65-35):not(.columns--35-65).columns--mobile-reverse > *:first-child {
    order: inherit;
  }
}
.columns.columns--2-column.columns--25-75 {
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 992px) {
  .columns.columns--2-column.columns--25-75 {
    grid-template-columns: minmax(0, 0.25fr) minmax(0, 0.75fr);
  }
  .columns.columns--2-column.columns--25-75.columns--mobile-reverse > *:first-child {
    order: inherit;
  }
}
.columns.columns--2-column.columns--75-25 {
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 992px) {
  .columns.columns--2-column.columns--75-25 {
    grid-template-columns: minmax(0, 0.75fr) minmax(0, 0.25fr);
  }
  .columns.columns--2-column.columns--75-25.columns--mobile-reverse > *:first-child {
    order: inherit;
  }
}
.columns.columns--2-column.columns--65-35 {
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 992px) {
  .columns.columns--2-column.columns--65-35 {
    grid-template-columns: minmax(0, 0.65fr) minmax(0, 0.35fr);
  }
  .columns.columns--2-column.columns--65-35.columns--mobile-reverse > *:first-child {
    order: inherit;
  }
}
.columns.columns--2-column.columns--35-65 {
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 992px) {
  .columns.columns--2-column.columns--35-65 {
    grid-template-columns: minmax(0, 0.35fr) minmax(0, 0.65fr);
  }
  .columns.columns--2-column.columns--35-65.columns--mobile-reverse > *:first-child {
    order: inherit;
  }
}
.columns.columns--3-column {
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 992px) {
  .columns.columns--3-column {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
.columns.columns--4-column {
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 768px) {
  .columns.columns--4-column {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 1440px) {
  .columns.columns--4-column {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
.columns.columns--5-column {
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 768px) {
  .columns.columns--5-column {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (min-width: 1440px) {
  .columns.columns--5-column {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}
.columns.columns--6-column {
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 475px) {
  .columns.columns--6-column {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 768px) {
  .columns.columns--6-column {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (min-width: 1440px) {
  .columns.columns--6-column {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
}
.columns .columns__region {
  display: flex;
  flex-flow: nowrap column;
  gap: var(--si-space-40);
}

@media (min-width: 1440px) {
  .section__container--narrow .columns--gap-small {
    gap: 28px;
  }
}