/* ========================================
   Global reusable grid system
======================================== */

.ui-grid {
    display: grid;
}

.ui-grid--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

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

.ui-grid--4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.ui-grid--sidebar {
    grid-template-columns: minmax(0, 1.6fr) minmax(280px, 0.7fr);
}

.ui-grid--content-wide {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
}

.ui-grid--items-start {
    align-items: start;
}

.ui-grid--items-center {
    align-items: center;
}

.ui-grid--gap-sm {
    gap: 15px;
}

.ui-grid--gap-md {
    gap: 20px;
}

.ui-grid--gap-lg {
    gap: 25px;
}

.ui-grid--gap-xl {
    gap: 60px;
}

@media (max-width: 992px) {
    .ui-grid--3,
    .ui-grid--4 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ui-grid--sidebar,
    .ui-grid--content-wide,
    .ui-grid--tablet-1 {
        grid-template-columns: minmax(0, 1fr);
    }

    .ui-grid--gap-xl {
        gap: 35px;
    }
}

@media (max-width: 768px) {
    .ui-grid--2,
    .ui-grid--3,
    .ui-grid--4 {
        grid-template-columns: minmax(0, 1fr);
    }

    .ui-grid--mobile-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ui-grid--compact-mobile {
        gap: 15px;
    }
}

@media (max-width: 480px) {
    .ui-grid--small-1 {
        grid-template-columns: minmax(0, 1fr);
    }
}