/*@tailwind base;
@tailwind components;*/

.grid {
  display: grid
}

.w-full {
  width: 100%
}

.grid-cols-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr))
}

.gap-4 {
  gap: 1rem
}

.bg-left {
  background-position: left
}

.bg-right {
  background-position: right
}

@media (min-width: 640px) {
  .sm\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr))
  }
}

@media (min-width: 768px) {
  .md\:col-span-2 {
    grid-column: span 2 / span 2
  }

  .md\:col-span-3 {
    grid-column: span 3 / span 3
  }

  .md\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr))
  }

  .md\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr))
  }

  .md\:grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr))
  }
}

@media (min-width: 1024px) {
  .lg\:grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr))
  }

  .lg\:gap-8 {
    gap: 2rem
  }
}

@media (min-width: 1280px) {
  .xl\:hidden {
    display: none
  }

  .xl\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr))
  }
}