.tm-block-columns {
  margin-top: var(--tm-columns-margin-top, 16px);
  margin-bottom: var(--tm-columns-margin-bottom, 20px);
}

.tm-block-columns .tm-columns-grid {
  display: grid;
  grid-template-columns: repeat(var(--tm-columns-total-span, var(--tm-columns-count, 2)), minmax(0, 1fr));
  gap: var(--tm-columns-gap, 24px);
  align-items: start;
}

.tm-block-columns .tm-columns-col {
  min-width: 0;
  grid-column: span var(--tm-columns-col-span, 1);
}

.tm-block-columns .tm-columns-col > *:first-child {
  margin-top: 0 !important;
}

.tm-block-columns .tm-columns-col > *:last-child {
  margin-bottom: 0 !important;
}

@media (max-width: 1200px) {
  .tm-block-columns.tm-block-columns--mobile-auto .tm-columns-grid {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  }

  .tm-block-columns.tm-block-columns--mobile-auto .tm-columns-col {
    grid-column: span 1;
  }
}

@media (max-width: 991.98px) {
  .tm-block-columns.tm-block-columns--mobile-auto .tm-columns-grid {
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  }

  .tm-block-columns.tm-block-columns--mobile-auto .tm-columns-col {
    grid-column: span 1;
  }

  .tm-block-columns.tm-block-columns--mobile-1 .tm-columns-grid {
    grid-template-columns: 1fr;
  }

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

  .tm-block-columns.tm-block-columns--mobile-2 .tm-columns-grid {
    grid-template-columns: repeat(var(--tm-columns-mobile-count, 2), minmax(0, 1fr));
  }

  .tm-block-columns.tm-block-columns--mobile-2 .tm-columns-col {
    grid-column: span var(--tm-columns-col-mobile-span, 1);
  }
}

@media (max-width: 575.98px) {
  .tm-block-columns.tm-block-columns--mobile-auto .tm-columns-grid {
    grid-template-columns: 1fr;
  }

  .tm-block-columns.tm-block-columns--mobile-1 .tm-columns-grid {
    grid-template-columns: 1fr;
  }

  .tm-block-columns.tm-block-columns--mobile-1 .tm-columns-col,
  .tm-block-columns.tm-block-columns--mobile-auto .tm-columns-col {
    grid-column: span 1;
  }

  .tm-block-columns.tm-block-columns--mobile-2 .tm-columns-grid {
    grid-template-columns: repeat(var(--tm-columns-mobile-count, 2), minmax(0, 1fr));
  }

  .tm-block-columns.tm-block-columns--mobile-2 .tm-columns-col {
    grid-column: span var(--tm-columns-col-mobile-span, 1);
  }
}