/* Hero Carousel Container */
.hero-carousel-frame {
    overflow: hidden;
    height: 100%;
}

/* Featured carousel grid - 4 cards in a row */
.featured-grid-container {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.75rem;
}

.featured-grid-card {
    height: 280px;
    width: 100%;
    position: relative;
}

/* Make images fill the entire card with zoom/crop effect */
.featured-grid-card img {
    display: block;
    object-fit: cover;
}

/* Increase zoom on the main image for better cropping */
.featured-grid-card .object-contain {
    object-fit: cover;
    transform: scale(1.1);
}

.featured-carousel-footer {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.featured-carousel-footer-item {
    min-width: 0;
    display: block;
}

.featured-carousel-filter-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* Mobile: 2 cards in a row */
@media (max-width: 768px) {
    .featured-grid-container {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.5rem;
    }

    .featured-grid-card {
        height: 200px;
    }

    .featured-carousel-footer {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.5rem;
    }

    .featured-carousel-filter-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.5rem;
    }

    .featured-carousel-filter-grid .w-10.h-10 {
        width: 2.25rem;
        height: 2.25rem;
    }

    .featured-carousel-filter-grid .text-xl {
        font-size: 1rem;
        line-height: 1.5rem;
    }

    .featured-carousel-filter-grid .p-3 {
        padding: 0.625rem;
    }
}

@media (max-width: 640px) {
    .featured-carousel-footer {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

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