.hero {
    position: relative;
    display: flex;
    min-height: 55rem;

    @media (min-width: $tabletP1) {
        min-height: 100vh;
    }

    // .hero__bg
    &__bg {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;

        img,
        video {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        img {
            position: absolute;
            top: 0;
            left: 0;
        }

        &.video-play {
            &::before {
                display: none;
            }
            img {
                display: none;
            }
        }

        &::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 76.92%);
            width: 100%;
            height: 100%;   
            z-index: 2;
        }
    }

    // .hero__container
    &__container {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    // .hero__inner
    &__inner {
        position: relative;
        z-index: 2;
        width: 100%;
        color: $white;

        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        max-width: 95.8rem;
        width: 100%;
        margin: 0 auto;
        text-align: center;

        padding: 16rem 0 2rem;

        @media (min-width: $tabletP1) {
            padding: 33rem 0 2rem;
        }

        h1 {
            @extend .h2;
            @include adaptiveProperty("font-size", 42, 26);
            color: $white;

            &:not(:first-child) {
                margin-top: 2rem;
            }
        }
    }

    // .hero__icon

    &__icon {
        max-width: 5.9rem;
        width: 100%;

        @media (min-width: $tabletP1) {
            max-width: 8.4rem;
        }

        img {
            width: 100%;
            height: auto;
        }
    }

    // .hero__links
    &__links {
        display: flex;
        flex-direction: column;
        align-items: center;
        &:not(:first-child) {
            margin-top: 2rem;
        }

        a {
            padding-block: .8rem;
            display: flex;
            align-items: center;
            gap: .5rem;
            font-size: 1.6rem;
            text-decoration: underline;
            line-height: 1.5;

            @media (min-width: $tabletP1) {
                font-size: 2rem;
                gap: 1rem;
                padding-block: 1.1rem;
            }

            &:after {
                content: '';
                width: 2.4rem;
                height: 2.4rem;
                background-image: url("data:image/svg+xml,%3Csvg width='28' height='28' viewBox='0 0 28 28' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14 0.75C21.3178 0.75 27.25 6.68223 27.25 14C27.25 21.3178 21.3178 27.25 14 27.25C6.68223 27.25 0.75 21.3178 0.75 14C0.75 6.68223 6.68223 0.75 14 0.75Z' stroke='white' stroke-width='1.5'/%3E%3Cpath d='M17.7288 12.857L13.6748 8.80328C13.5496 8.67777 13.4863 8.5304 13.4849 8.36118C13.4834 8.19195 13.5453 8.04409 13.6704 7.9176C13.7957 7.79074 13.9435 7.72804 14.1138 7.72952C14.2841 7.73099 14.4324 7.7943 14.5587 7.91944L19.6797 13.0405C19.7468 13.1083 19.7955 13.1788 19.826 13.252C19.8566 13.3253 19.8719 13.403 19.8719 13.4852C19.8719 13.5673 19.8566 13.6449 19.826 13.7178C19.7955 13.7909 19.7468 13.8612 19.6797 13.9288L14.5543 19.0542C14.4247 19.1794 14.2763 19.2419 14.109 19.2419C13.9419 19.2419 13.7957 19.1794 13.6704 19.0542C13.5453 18.926 13.4827 18.7781 13.4827 18.6105C13.4827 18.4427 13.5453 18.296 13.6704 18.1704L17.7288 14.1122L8.73725 14.1122C8.55734 14.1122 8.40702 14.0527 8.2863 13.9335C8.16558 13.8144 8.10522 13.6648 8.10522 13.4846C8.10522 13.3045 8.16558 13.1548 8.2863 13.0357C8.40702 12.9166 8.55734 12.857 8.73725 12.857L17.7288 12.857Z' fill='white'/%3E%3C/svg%3E%0A");
                background-position: center;
                background-repeat: no-repeat;
                background-size: 100%;
                transition: .2s all;

                @media (min-width: $tabletP1) {
                        width: 2.8rem;
                    height: 2.8rem;
                }

            }

            &:hover {
                &::after {
                    transform: translateX(.4rem);
                }
            }
        }
    }
}