.f-collection-showcase .container-full {
    padding-left: 0;
    padding-right: 0
}

.f-collection-showcase__wrapper {
    display: grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    align-items: center
}

@media screen and (max-width: 1023px) {
    .f-collection-showcase__wrapper {
        display: flex;
        flex-direction: column;
        flex-wrap: wrap
    }

    .f-collection-showcase__wrapper .f-collection-showcase__contents, .f-collection-showcase__wrapper .f-collection-showcase__banner {
        width: 100%
    }
}

.f-collection-showcase__contents {
    padding: 48px 25px
}

@media screen and (max-width: 1023px) {
    .f-collection-showcase__contents {
        order: 2
    }
}

.f-collection-showcase__content {
    visibility: hidden;
    opacity: 0;
    display: none;
    transition: opacity var(--f-duration-default) ease
}

.f-collection-showcase__content.active {
    opacity: 1;
    visibility: visible;
    display: block
}

.f-collection-showcase__content-wrapper {
    width: 100%
}

@media screen and (min-width: 1280px) {
    .f-collection-showcase__content-wrapper {
        max-width: 80%;
        margin: 0 auto
    }
}

@media screen and (min-width: 1536px) {
    .f-collection-showcase__content-wrapper {
        max-width: 61.7%;
        margin: 0 auto
    }
}

.f-collection-showcase__banner {
    height: 100%
}

.f-collection-showcase__subheading {
    margin-bottom: 12px
}

@media screen and (min-width: 768px) {
    .f-collection-showcase__subheading {
        margin-bottom: 20px
    }
}

.f-collection-showcase__heading {
    margin-bottom: 24px
}

@media screen and (min-width: 768px) {
    .f-collection-showcase__heading {
        margin-bottom: 40px
    }
}

.f-collection-showcase__product h3 {
    margin-top: 8px
}

.f-collection-showcase__product .f-image, .f-collection-showcase__product .f-placeholder-svg {
    transition: opacity .8s ease, transform 1.1s cubic-bezier(0.15, 0.75, 0.5, 1) 0s
}

.f-collection-showcase__product:hover .f-image, .f-collection-showcase__product:hover .f-placeholder-svg {
    transform: scale3d(1.1, 1.1, 1.1) translateZ(0)
}

.f-collection-showcase__product-media {
    overflow: hidden
}

.f-collection-showcase__image, .f-collection-showcase__image-placeholder {
    --bg-card-placeholder: rgb(var(--color-background));
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: all var(--f-duration-default)
}

.f-collection-showcase__image.active, .f-collection-showcase__image-placeholder.active {
    opacity: 1
}

.f-collection-showcase__tabs {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center
}

.f-collection-showcase__tabs ul {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center
}

.f-collection-showcase__tabs li {
    cursor: pointer
}

.f-collection-showcase__tabs li:after {
    content: "";
    position: absolute;
    bottom: -4px;
    right: 0;
    width: 0;
    height: 2px;
    background-color: currentColor;
    transition: all var(--f-duration-long, 0.5s)
}

.f-collection-showcase__tabs li.active:after, .f-collection-showcase__tabs li:hover:after {
    width: 100%;
    right: auto;
    left: 0
}

.f-collection-showcase__tabs li + li {
    margin-top: 16px
}

.f-collection-showcase__products .f-slider-controls--absolute .f-slider-controls__button {
    left: 31px
}

.f-collection-showcase__products .f-slider-controls--absolute .f-slider-controls__button-next {
    left: auto;
    right: 31px
}

@media screen and (min-width: 1280px) {
    .f-collection-showcase__products .f-slider-controls__button {
        opacity: 0;
        pointer-events: none
    }

    .f-collection-showcase__products:hover .f-slider-controls__button {
        opacity: 1;
        pointer-events: auto
    }
}

.f-collection-showcase__products-footer {
    margin-top: 24px
}

@media screen and (min-width: 768px) {
    .f-collection-showcase__products-footer {
        margin-top: 40px
    }
}

@media screen and (min-width: 1024px) {
    .f-collection-showcase--image-left .f-collection-showcase__contents {
        order: 2
    }
}