.grid {
    display: grid;
}

/* X-Small xs */
@media (width < 575.98px) {
    .xs\:grid-cols-1 {
        grid-template-columns: repeat(1, minmax(0, 1fr))
    }
}

/* Small sm */
@media (min-width: 576px) and (max-width: 767.98px) {
    .sm\:gap-10 {
        gap: 10px;
    }

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

/* Medium md */
@media (min-width: 768px) and (max-width: 991.98px) {
    .md\:gap-16 {
        gap: 1rem;
    }

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

/* Large lg */
@media (min-width: 992px) and (max-width: 1199.98px) {
    .lg\:gap-16 {
        gap: 1rem;
    }

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

/* Extra large xl */
@media (min-width: 1200px) and (max-width: 1399.98px) {
    .xl\:gap-16 {
        gap: 1rem;
    }

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

/* Extra extra large xxl */
@media (min-width: 1400px) {
    .xxl\:gap-16 {
        gap: 1rem;
    }

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