/**
 * Sermon Grid Layouts
 * Works with ACSS utility classes
 */

/* Default grid container */
.sermon-grid {
    display: grid;
    gap: var(--space-l);
    width: 100%;
}

/* 2 column layout */
.sermon-grid--2col {
    grid-template-columns: repeat(2, 1fr);
}

/* 3 column layout */
.sermon-grid--3col {
    grid-template-columns: repeat(3, 1fr);
}

/* 4 column layout */
.sermon-grid--4col {
    grid-template-columns: repeat(4, 1fr);
}

/* Responsive breakpoints */
@media (max-width: 1200px) {
    .sermon-grid--4col {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 900px) {
    .sermon-grid--3col,
    .sermon-grid--4col {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .sermon-grid--2col,
    .sermon-grid--3col,
    .sermon-grid--4col {
        grid-template-columns: 1fr;
    }
}

/* Auto-fit grid */
.sermon-grid--auto {
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}