.flex-layout.hero-layout {
    position: relative;
    margin-top: 0;
    background-color: var(--stone-80);
    overflow-x: clip;
    padding-top: max(2.5rem, calc(4 * var(--su)));
    padding-bottom: max(4rem, calc(4.5 * var(--su)));
}

.flex-layout.hero-layout .pk-heading {
    margin-bottom: max(1rem, calc(2 * var(--su)));
}

.flex-layout.hero-layout .hero-content-wrap {
	position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
	z-index: 1;
}

.flex-layout.hero-layout .pk-button-group {
    margin-top: max(1.5rem, calc(1.5 * var(--su)));
}

.flex-layout.hero-layout .pk-text {
    font-size: var(--dekstop-body-lg);
    max-width: max(46.875rem, calc(46.875 * var(--su)));
}

.flex-layout.hero-layout .hero-gallery {
    margin-top: max(2.5rem, calc(2.5 * var(--su)));
    overflow: visible;
}

.flex-layout.hero-layout .hero-gallery .swiper-wrapper {
    transition-timing-function: linear !important;
}

.flex-layout.hero-layout .hero-gallery .swiper-slide {
    max-width: max(400px, calc(25.75 * var(--su)));
    aspect-ratio: 480/574;
    border-radius: max(0.5rem, calc(0.5 * var(--su)));
    overflow: clip;
}

.flex-layout.hero-layout .hero-gallery .swiper-slide img {
    object-fit: cover;
    width: 100%;
    height: 100%;
}

.flex-layout.hero-layout .hero-gallery .mouse-follower {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transform: translate3d(-50%, -50%, 0);
    transition: opacity 0.2s ease;
    will-change: transform;
}

.flex-layout.hero-layout .hero-pattern {
    position: absolute;
    top: 0;
    right: 0;
}

@media screen and (max-width: 767px) {
    .flex-layout.hero-layout .hero-gallery .swiper-slide {
        max-width: max(300px, calc(25.75 * var(--su)));
        aspect-ratio: 1;
    }

	.flex-layout.hero-layout .hero-pattern {
		max-width:12.5rem;
		top: 20%;
	}

}

@media screen and (max-width: 992px) {
    .flex-layout.hero-layout .hero-content-wrap {
        flex-direction: column;
        align-items: flex-start;
    }

}