.modular-cases {
    margin-top: var(--spacing-lg);

    & h1 {
        text-align: center;
        color: var(--primary-color);
        font-size: var(--font-size-md);
        font-weight: var(--font-weight-bold);
        position: relative;
        background: transparent;
        text-shadow: var(--text-shadow-white);
        margin: var(--spacing-sm) 0;
        &::after {
            content: "";
            position: absolute;
            bottom: 30%;
            left: 50%;
            transform: translateX(-50%);
            width: 100%;
            height: var(--gradient-height);
            background: linear-gradient(to right, transparent, var(--primary-color), transparent);
            z-index: -1;
        }
    }

    & .case-card {
        margin: var(--spacing-sm);
        padding: var(--spacing-sm);
        background: var(--bg-white);
        border-radius: var(--border-radius);
        box-shadow: 0 0.125rem var(--border-radius) var(--box-shadow);
        overflow: hidden;
        transition: transform var(--transition-fast);
        &:hover {
            transform: translateY(-0.25rem);
        }
    }

    & .case-title {
        color: var(--primary-color);
        font-size: var(--font-size-sm);
        font-weight: var(--font-weight-bold);
        text-align: center;
    }

    & .case-images {
        display: flex;
        flex-direction: column;
        gap: var(--spacing-sm);
    }

    & .case-image {
        text-align: center;
        
        & h6 {
            font-size: var(--font-size-xs);
            font-weight: var(--font-weight-bold);
            color: var(--text-dark);
            margin: 0 0 var(--spacing-sm) 0;
        }
        
        & img {
            width: 100%;
            height: var(--image-height);
            object-fit: cover;
            border-radius: var(--border-radius);
        }
    }

    & .case-specs {
        display: flex;
        flex-direction: column;
        gap: var(--spacing-sm);
        margin-top: var(--spacing-sm);
    }

    & .case-spec {
        font-size: var(--font-size-xs);
        text-align: center;
    }
}