@use "../common/utils" as *;
@use "../common/mixins" as *;

.hero {
    margin-bottom: calc-rem(50px);

    &__navigation {
        margin-top: calc-rem(40px);

        @include media-breakpoint-up(lg) {
            padding: calc-rem(35px 40px);
            background: rgba(var(--color-white));
            border-radius: var(--border-radius);
            margin-top: calc-rem(20px);
        }

        @include media-breakpoint-up(xl) {
            margin-top: 0;
        }


        .title {
            margin-bottom: calc-rem(20px);

        }

        ul {
            display: grid;
            grid-template-columns: 1fr;
            list-style-type: none;
            padding-left: 0;
            margin-bottom: 0;
            gap: calc-rem(5px);

            @include media-breakpoint-up(md) {
                grid-template-columns: 1fr 1fr;
            }

            @include media-breakpoint-up(lg) {
                grid-column-gap: calc-rem(20px);
            }

            @include media-breakpoint-up(xl) {
                gap: 0;
                grid-template-columns: 1fr;
            }

            li {

                a {
                    display: flex;
                    align-items: center;
                    padding: calc-rem(14px);
                    font-size: calc-rem(14px);
                    gap: calc-rem(20px);
                    background: rgba(var(--color-white));
                    border-radius: calc-rem(5px);
                    border: calc-rem(1px) solid rgba(var(--color-border));

                    @include media-breakpoint-up(lg) {
                        padding: calc-rem(14px) 0;
                        background: unset;
                        border-radius: unset;
                        border: unset;
                        border-bottom: calc-rem(1px) solid rgba(var(--color-background));
                    }

                    img {
                        width: auto;
                        height: calc-rem(28px);
                        object-fit: contain;
                    }
                }

                &:last-child {
                    a {
                        @include media-breakpoint-up(xl) {
                            border-bottom: unset;

                        }
                    }
                }

            }
        }
    }

    &__banner {
        position: relative;
        height: 100%;
        width: 100%;
        border-radius: var(--border-radius);
        overflow: hidden;
        z-index: 3;
        color: rgba(var(--color-white));
        padding: calc-rem(30px);
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        min-height: calc-rem(410px);

        @include media-breakpoint-up(lg) {
            padding: calc-rem(50px);
            height: 100%;
        }

        &:after {
            content: '';
            width: 100%;
            height: 100%;
            inset: 0;
            position: absolute;
            background: rgba(0, 0, 0, 0.3);
            z-index: -1;
        }

        .title {
            color: rgba(var(--color-white));
            margin-bottom: calc-rem(35px);
        }

        .background {
            position: absolute;
            width: 100%;
            height: 100%;
            inset: 0;
            z-index: -1;

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


    }

    &__slider {
        overflow-x: hidden;
        margin-top: calc-rem(30px);


        .swiper-slide {
            width: fit-content;
        }

        .slider-item {
            white-space: nowrap;
            font-size: calc-rem(12px);
        }


    }

}
