@keyframes wiggle {
    0%,
    100% {
        transform: rotate(-3deg);
    }
    50% {
        transform: rotate(3deg);
    }
}

#hero-image {
    animation: wiggle 5s ease-in-out infinite;
}

ul::scroll-button(*) {
    cursor: pointer;
    background: none;
    border: 0;
    font-size: 60px;
    position: absolute;
    top: calc(50% - 30px);
}
ul::scroll-button(left) {
    left: -70px;
    content: "◄" / "Previous";
}
ul::scroll-button(right) {
    right: -70px;
    content: "►" / "Next";
}

@media (max-width: 750px) {
    ul::scroll-button(*) {
        font-size: 40px;
        top: calc(50% - 20px);
    }
    ul::scroll-button(left) {
        left: -50px;
        content: "◄" / "Previous";
    }
    ul::scroll-button(right) {
        right: -50px;
        content: "►" / "Next";
    }
}

@media (max-width: 500px) {
    ul::scroll-button(*) {
        font-size: 10dvw;
        top: 0;
    }
    ul::scroll-button(left) {
        left: 0;
        content: "◄" / "Previous";
    }
    ul::scroll-button(right) {
        right: 0;
        content: "►" / "Next";
    }
}