@layer parts {
    .showcase {
        position: relative;
        overflow: visible;
    }

    .showcase__surface {
        position: absolute;
        z-index: 0;
        pointer-events: none;
    }

    .showcase__item {
        position: relative;
        min-width: 0;
        z-index: 1;
    }

    .showcase__accent {
        position: absolute;
        z-index: 1;
    }

    @media (max-width: 768px) {
        .showcase {
            display: grid !important;
            grid-template-columns: repeat(var(--sh-mobile-cols, 1), 1fr) !important;
            grid-template-rows: none !important;
            gap: var(--sh-mobile-gap, var(--spacing-md)) !important;
            margin: 0 !important;
        }

        .showcase__surface {
            display: none;
        }

        .showcase__item {
            translate: none !important;
            grid-column: auto !important;
            grid-row: auto !important;
            align-self: var(--sh-mobile-align, stretch) !important;
            justify-self: stretch !important;
            width: auto !important;
            order: var(--sh-mobile-order, 0);
        }
        .showcase__item--mobile-col {
            grid-column: var(--sh-mobile-col) !important;
        }

        .showcase__item > .post-cards {
            height: 100%;
            padding-bottom: 0;
        }
    }
}