:where(.product-card-banner *) {
    margin-top: 0;
}

.product-card-banner {
    margin-top: 0;
    container: product-card / inline-size;
}

.product-card-banner__item {
    background-color: var(--color-black);
    color: var(--color-white);
    /* @link https://utopia.fyi/clamp/calculator?a=440,1600,40-70 */
    padding-block: var(--_padding-block, clamp(2.5rem, 1.7888rem + 2.5862cqi, 4.375rem) 4.375rem);
    padding-inline: var(--content-gutters);
    min-height: min(50rem, 70dvh);
    position: relative;
    isolation: isolate;
}

@media (width < 37.5rem) {
    .product-card-banner__item {
        min-height: 50dvh;
    }
}

.product-card-banner__media {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: -1;
}

    .product-card-banner__media::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(180deg, #010101 0%, rgba(255, 255, 255, 0) 100%);
    }

.product-card-banner__media__image {
    position: absolute;
    inset: 0;
    height: 100%;
    width: 100%;
    object-fit: cover;
}

.product-card-banner__wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
}

:where(.product-card-banner__item) .o-keyline {
    flex-basis: 100%;
}

.product-card-banner__content {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    flex-grow: 1;
}

.product-card-banner__content__title {
    line-height: 1.0909;
    max-inline-size: 50rem;
}

.product-card-banner__content__summary {
    max-inline-size: 40.25rem;
}

.product-card-banner__cta {
}