/* CSS سفارشی برای نمایش بنرها */

/* Grid 4 columns for desktop */
.banner-grid-4 {
    display: grid;
    gap: 1rem;
    grid-template-columns: 1fr; /* موبایل: تک ستونی */
}

/* تبلت: دو ستونی */
@media (min-width: 640px) {
    .banner-grid-4 {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* دسکتاپ: چهار ستونی */
@media (min-width: 768px) {
    .banner-grid-4 {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* Grid 3 columns */
.banner-grid-3 {
    display: grid;
    gap: 1rem;
    grid-template-columns: 1fr; /* موبایل: تک ستونی */
}

@media (min-width: 640px) {
    .banner-grid-3 {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 768px) {
    .banner-grid-3 {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Grid 2 columns */
.banner-grid-2 {
    display: grid;
    gap: 1rem;
    grid-template-columns: 1fr; /* موبایل: تک ستونی */
}

@media (min-width: 640px) {
    .banner-grid-2 {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Banner item styles */
.banner-item {
    position: relative;
    overflow: hidden;
    border-radius: 0.75rem;
    transition: transform 0.3s ease;
}

.banner-item:hover {
    transform: scale(1.02);
}

.banner-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.banner-item:hover img {
    transform: scale(1.05);
}

/* Aspect ratios */
.banner-aspect-square {
    aspect-ratio: 1 / 1;
}

.banner-aspect-wide {
    aspect-ratio: 16 / 9;
}

.banner-aspect-tall {
    aspect-ratio: 3 / 4;
}