.shop-slideshow {
    --shop-slideshow-offset: 165px;
    position: relative;
    width: 100%;
    overflow: hidden
}

.shop-slideshow__slide {
    display: none
}

.shop-slideshow__slide.is-active {
    display: flex;
    flex-direction: column;
    height: auto
}

.shop-slideshow__slide.is-active.has-image {
    height: calc(100vh - var(--shop-slideshow-offset));
    height: calc(100svh - var(--shop-slideshow-offset))
}

.shop-slideshow__picture {
    position: relative;
    flex: 1 1 0;
    min-height: 0;
    width: 100%;
    overflow: hidden;
    background: #eee
}

.shop-slideshow__picture img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center
}

.shop-slideshow__content {
    flex: 0 0 auto;
    display: grid;
    grid-template-columns: 1fr 2fr .9fr;
    gap: clamp(20px, 3.5vw, 56px);
    align-items: center;
    padding: 28px max(24px, calc((100vw - 1180px)/2));
    background: #20252a;
    color: #fff
}

.shop-slideshow__content h1,
.shop-slideshow__content h2,
.shop-slideshow__content p {
    margin: 0
}

.shop-slideshow__content h1,
.shop-slideshow__content h2 {
    font-size: clamp(20px, 2vw, 30px);
    line-height: 1.15
}

.shop-slideshow__content p {
    line-height: 1.5
}

.shop-slideshow__button {
    display: inline-block;
    padding: 12px 22px;
    text-decoration: none
}

.shop-slideshow__arrow {
    position: absolute;
    top: 38%;
    transform: translateY(-50%);
    z-index: 2;
    width: 42px;
    height: 42px;
    border: 0;
    border-radius: 50%;
    background: rgba(0, 0, 0, .45);
    color: #fff;
    font-size: 28px
}

.shop-slideshow__arrow.is-prev {
    left: 16px
}

.shop-slideshow__arrow.is-next {
    right: 16px
}

@media(max-width:767px) {
    .shop-slideshow {
        overflow: visible
    }

    .shop-slideshow__slide.is-active,
    .shop-slideshow__slide.is-active.has-image {
        display: block;
        height: auto
    }

    .shop-slideshow__picture {
        height: clamp(220px, 58vw, 360px)
    }

    .shop-slideshow__content {
        display: flex;
        flex-direction: column;
        gap: 14px;
        padding: 22px 20px 34px;
        text-align: center
    }

    .shop-slideshow__content h1,
    .shop-slideshow__content h2 {
        font-size: 20px
    }

    .shop-slideshow__arrow {
        top: 26vw
    }
}