.custom-teaser {
    margin-bottom: 60px;
}
.product-grid {
        max-width: 1200px !important;
        margin: 0 auto;
        padding: 24px 120px 48px 120px;
        display: flex;
        gap: 40px;
        justify-content: center; /* Zentriert den gesamten Block */
    }

    /* Schal Section */
    .scarves-section {
        width: 50%;
    }

    .scarves-section .custom-product-teaser {
        width: 100%;
        display: flex;
        flex-direction: column;
    }

    .scarves-section .product-image-wrapper {
        position: relative;
        width: 100%;
        padding-top: 160%; /* Doppelte Höhe der Mützenbilder plus Gap */
        overflow: hidden;
        background-color: #f5f5f5;
    }

    /* Mützen Section */
    .beanies-section {
        width: 35%;
        display: flex;
        flex-direction: column;
        /* gap: 40px; */
        justify-content: space-between;
    }

    .beanies-section .product-image-wrapper {
        position: relative;
        width: 100%;
        padding-top: 100%; /* Quadratisches Format */
        overflow: hidden;
        background-color: #f5f5f5;
    }

    .beanies-section .product-image-wrapper {
        position: relative;
        width: 100%;
        padding-top: 100%;
        overflow: hidden;
        background-color: #f5f5f5;
    }

    /* Common Image Styles */
    .product-image-wrapper img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    /* Image Hover Effect */
    .primary-image,
    .secondary-image {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }

    .secondary-image {
        opacity: 0;
        transition: opacity 0.3s ease-in-out;
    }

    .product-image-wrapper:hover .secondary-image {
        opacity: 1;
    }

    .product-image-wrapper:hover .primary-image {
        opacity: 0;
        transition: opacity 0.3s ease-in-out;
    }

    /* Product Details */
    .product-title {
        margin: 15px 0 5px !important;
        letter-spacing: 1px;
        text-align: center;
        font-size: 1.2em;
    }

    .product-title {
        border-bottom: 2px solid var(--white) !important;
    }

    .product-title:hover {
        border-bottom: 2px solid var(--primary-color) !important;
        transition: color 0.3s ease;
    }

    /* Product Link */
    .product-link {
        text-decoration: none;
        color: inherit;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    /* Responsive Design */
    @media (max-width: 1024px) {
        .product-grid {
            padding: 24px 80px 48px 80px;
        }
    }

    @media (max-width: 768px) {
        .product-grid {
            padding: 20px 100px;
            flex-direction: column;
        }
        
        .scarves-section,
        .beanies-section {
            width: 100%;
        }

        .scarves-section .product-image-wrapper {
            padding-top: 100%; /* Wieder Quadratisch */
        }
    }

    @media (max-width: 480px) {
        .product-title {
            font-size: 1em;
        }
        
        .product-grid {
            padding: 20px;
            gap: 20px;
        }
    }