section.hero {
    margin-bottom: 1.8rem;
}

@media screen and (max-width: 768px) and (orientation: portrait) {

section.hero {
        margin-bottom: 0.6rem;
}
    }

@media screen and (max-width: 768px) and (orientation: portrait) {

section.hero .container {
            padding-left: 0;
            padding-right: 0;
    }
        }

section.hero .wrap {
        background-color: var(--primary-color);
        padding: 0 0.16rem;
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-radius: 0.48rem;
        overflow: hidden;
    }

@media screen and (max-width: 768px) and (orientation: portrait) {

section.hero .wrap {
            flex-direction: column;
            border-radius: 0;

            padding-top: 1.32rem;
            padding-bottom: .16rem;
    }
        }

:is(section.hero .wrap) .text-column {
            padding-left: 0.56rem;
            width: 6.76rem;

        }

@media screen and (max-width: 768px) and (orientation: portrait) {

:is(section.hero .wrap) .text-column {
                width: 100%;
                padding-left: 0;
                padding-bottom: 0.48rem;

        }
            }

:is(:is(section.hero .wrap) .text-column) .label {
                margin-bottom: 0.24rem;
            }

:is(:is(section.hero .wrap) .text-column) .title {
                margin-bottom: 0.24rem;
            }

:is(:is(section.hero .wrap) .text-column) .buttons {
                display: flex;
                gap: 0.16rem;
                margin-top: 0.56rem;
            }

@media screen and (max-width: 768px) and (orientation: portrait) {

:is(:is(section.hero .wrap) .text-column) .buttons {
                    flex-direction: column;
                    margin-top: 0.24rem;
                    gap: 0.16rem;
            }
                }

:is(section.hero .wrap) .marquees-column {
            width: 6.2rem;
        }

:is(section.hero .wrap) .marquee-group {
            display: flex;
            gap: 0.24rem;
            height: 8rem;
        }

:is(section.hero .wrap) .marquee-group-mobile {
            display: none;
        }

:is(section.hero .wrap) .marquee {
            width: 2.98rem;
            overflow: hidden;
        }

:is(section.hero .wrap) .marquee-track {
            display: flex;
            flex-direction: column;
            gap: 0.16rem;
            will-change: transform;
        }

:is(section.hero .wrap) .marquee.left .marquee-track {
            animation: hero-marquee-down var(--marquee-duration, 16s) linear infinite;
        }

:is(section.hero .wrap) .marquee.right .marquee-track {
            animation: hero-marquee-up var(--marquee-duration, 16s) linear infinite;
        }

:is(section.hero .wrap) .marquee-item img {
            width: 100%;
            height: auto;
            display: block;
            border-radius: 0.48rem;
        }

@media screen and (max-width: 768px) and (orientation: portrait) {
            :is(section.hero .wrap) .marquee-group {
                display: none;
            }

            :is(section.hero .wrap) .marquee-group-mobile {
                display: block;
                overflow: hidden;
                width: 100%;
            }

            :is(section.hero .wrap) .marquee-mobile {
                overflow: hidden;
                width: 100%;
            }

            :is(section.hero .wrap) .marquee-mobile-track {
                display: flex;
                flex-direction: row;
                gap: 0.24rem;
                width: max-content;
                animation: hero-marquee-horizontal var(--marquee-duration, 16s) linear infinite;
                will-change: transform;
            }

            :is(section.hero .wrap) .marquee-mobile .marquee-item {
                flex: 0 0 auto;
            }

            :is(section.hero .wrap) .marquee-mobile .marquee-item img {
                width: 2.98rem;
                height: 3.98rem;
                object-fit: cover;
                display: block;
            }
        }

@keyframes hero-marquee-up {
    from {
        transform: translateY(0%);
    }
    to {
        transform: translateY(-50%);
    }
}

@keyframes hero-marquee-down {
    from {
        transform: translateY(-50%);
    }
    to {
        transform: translateY(0%);
    }
}

@keyframes hero-marquee-horizontal {
    from {
        transform: translateX(0%);
    }
    to {
        transform: translateX(-50%);
    }
}