/**
 * FSP Promotional Banners Styles
 * Promo banner sections and grids
 *
 * @package Free_Style_Products
 */

/* ==========================================================================
   Promotional Banners Section
   ========================================================================== */

.promo-section {
    background-color: var(--hw-dark);
    padding: 40px 0;
}

.promo-banner {
    display: block;
    border-radius: var(--hw-radius-lg);
    overflow: hidden;
    transition: var(--hw-transition);
    margin-bottom: 30px;
}

.promo-banner:last-child {
    margin-bottom: 0;
}

.promo-banner:hover {
    transform: translateY(-5px);
    box-shadow: var(--hw-shadow-lg);
}

.promo-banner img {
    width: 100%;
    height: auto;
    display: block;
}

/* Full-width promo banner */
.promo-full {
    margin-bottom: 30px;
}

.promo-full .promo-banner {
    margin-bottom: 0;
}

/* Two-column promo layout */
.promo-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
}

.promo-grid .promo-banner {
    margin-bottom: 0;
}

/* Promo Banner Spacing */
.promo-collection,
.promo-decorations {
    margin-top: 30px;
}

/* Responsive */
@media (max-width: 767.98px) {
    .promo-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .promo-section {
        padding: 30px 0;
    }
}