@layer components {
    .carouse-item-customer {
        border-radius: var(--radius-lg);
    }
    .customer-story-layout {
        aspect-ratio: 16 / 9;
        position: relative;
        overflow: hidden;
        -webkit-user-select: none; /* Safari */
        -moz-user-select: none; /* Old Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
        user-select: none; /* Standard syntax (Chrome, Edge, Opera) */

        .customer-info {
            padding: var(--spacing-8) 0 0 var(--spacing-8);
            width: 35%;
            z-index: 10;
            border-radius: var(--radius-lg);
            display: flex;
            flex-direction: column;
            gap: var(--spacing-3);
        }
        .customer-setup-picture {
            position: absolute;
            top: 5%;
            z-index: 0;
            height: 100%;
            left: 35%;
            overflow: hidden;

            img {
                height: 100%;
                width: auto;
                max-width: none !important;
                object-fit: cover;
                aspect-ratio: auto;
                overflow: visible;
            }
        }
    }

    .customer-media-card {
        --_avatar-size: 4rem;
        display: grid;
        grid-template-columns: var(--_avatar-size) 1fr;
        gap: var(--spacing-2);
        align-items: center;

        .customer-avatar {
            width: var(--_avatar-size);
            height: var(--_avatar-size);
            border-radius: var(--radius-lg);
            corner-shape: squircle;
        }
        .customer-info-details {
            display: flex;
            flex-direction: column;
            gap: 0;

            h5 {
                font-size: var(--font-size-lg);
                font-weight: var(--font-weight-semibold);
                color: var(--color-white);
                opacity: 0.9;
            }
            p {
                font-size: var(--font-size-lg);
                font-weight: var(--font-weight-normal);
                color: var(--color-white);
                opacity: 0.7;
                margin: 0;
            }
        }
    }
    .customer-story-details p {
        font-size: var(--font-size-lg);
        color: var(--color-white);
        opacity: 0.8;
        margin: 0;
    }
}