/* Minimal responsive layout utilities used by the public templates.
   This replaces the large Tailwind browser compiler. */
.flex { display: flex; }
.flex-col { flex-direction: column; }
.grid { display: grid; }
.grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.hidden { display: none; }

@media (min-width: 40rem) {
  .sm\:block { display: block; }
  .sm\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 48rem) {
  .md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 64rem) {
  .lg\:flex-row { flex-direction: row; }
  .lg\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lg\:grid-cols-\[minmax\(0\,1fr\)_18rem\] { grid-template-columns: minmax(0, 1fr) 18rem; }
}

@media (min-width: 80rem) {
  .xl\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}