/*
 * SAVA MOTORS O nama hero.
 * Dve fotografije sa blagim cinematic pokretom.
 */

body.page-id-11 .sm-dealer-page__hero {
    position: relative;
    min-height: clamp(590px, 72vh, 790px);
    display: flex;
    align-items: flex-end;
    overflow: hidden;
    isolation: isolate;
    background: #202226;
}

body.page-id-11 .sm-dealer-page__hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
        linear-gradient(
            90deg,
            rgba(145, 7, 14, .58) 0%,
            rgba(190, 12, 20, .34) 27%,
            rgba(165, 10, 17, .12) 48%,
            rgba(20, 22, 25, .06) 64%,
            rgba(20, 22, 25, .16) 100%
        ),
        linear-gradient(
            0deg,
            rgba(18, 20, 23, .34),
            transparent 58%
        );
}

body.page-id-11 .sm-dealer-page__hero::after {
    z-index: 5;
}

body.page-id-11 .sm-dealer-page__hero > .sm-dealer-page__inner {
    position: relative;
    z-index: 3;
    width: min(1240px, calc(100% - 64px));
    padding-top: 160px;
    padding-bottom: clamp(78px, 9vw, 118px);
}

body.page-id-11 .sm-dealer-page__hero h1 {
    max-width: 760px;
    font-size: clamp(52px, 6.6vw, 94px);
    letter-spacing: -.045em;
    line-height: .94;
    text-shadow: 0 3px 28px rgba(0, 0, 0, .28);
}

body.page-id-11 .sm-dealer-page__hero p {
    max-width: 650px;
    color: rgba(255, 255, 255, .94);
    font-size: clamp(17px, 1.8vw, 21px);
    line-height: 1.65;
    text-shadow: 0 2px 18px rgba(0, 0, 0, .30);
}

body.page-id-11 .sm-dealer-page__hero .sm-dealer-page__buttons a {
    box-shadow: 0 14px 34px rgba(54, 4, 7, .18);
}

.sm-about-hero__stage {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    background: #202226;
}

.sm-about-hero__pair {
    position: absolute;
    inset: 0;
    display: grid;
    grid-template-columns: 42% 58%;
}

.sm-about-hero__image {
    position: relative;
    min-width: 0;
    height: 100%;
    margin: 0;
    overflow: hidden;
    background: #d8d8d8;
}

.sm-about-hero__image + .sm-about-hero__image {
    border-left: 2px solid rgba(255, 255, 255, .58);
}

.sm-about-hero__image img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    will-change: transform;
}

.sm-about-hero__image:first-child img {
    object-position: 52% center;
    animation: sm-about-left-image 16s ease-in-out infinite alternate;
}

.sm-about-hero__image:last-child img {
    object-position: center;
    animation: sm-about-right-image 18s ease-in-out infinite alternate;
}

@keyframes sm-about-left-image {
    from {
        transform: scale(1.02) translateX(0);
    }

    to {
        transform: scale(1.075) translateX(1.2%);
    }
}

@keyframes sm-about-right-image {
    from {
        transform: scale(1.025) translateX(0);
    }

    to {
        transform: scale(1.065) translateX(-1%);
    }
}

@media (max-width: 767px) {
    body.page-id-11 .sm-dealer-page__hero {
        min-height: 780px;
    }

    body.page-id-11 .sm-dealer-page__hero::before {
        background:
            linear-gradient(
                0deg,
                rgba(135, 7, 13, .72) 0%,
                rgba(180, 10, 18, .34) 43%,
                rgba(20, 22, 25, .06) 73%
            );
    }

    body.page-id-11 .sm-dealer-page__hero > .sm-dealer-page__inner {
        width: calc(100% - 28px);
        padding-top: 350px;
        padding-bottom: 70px;
    }

    body.page-id-11 .sm-dealer-page__hero h1 {
        font-size: clamp(46px, 13vw, 68px);
    }

    .sm-about-hero__pair {
        grid-template-columns: 1fr;
        grid-template-rows: 52% 48%;
    }

    .sm-about-hero__image + .sm-about-hero__image {
        border-top: 2px solid rgba(255, 255, 255, .58);
        border-left: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .sm-about-hero__image img {
        animation: none;
        transform: none;
    }
}