section {
    padding: 2% 15%;
}

    section > div:first-of-type {
        display: flex;
        flex-direction: column;
        text-align: center;
        gap: 20px;
        align-items: center;
    }

        section > div:first-of-type > img {
            width: 30%;
            text-align: center;
        }

        section > div:first-of-type > h1 {
            font-weight: bold;
            font-size: xxx-large;
            color: var(--lmc-orange);
        }

    section > div:last-child {
        text-align: center;
        margin-top: 5%;
    }

        section > div:last-child > ul {
            list-style: none;
            display: flex;
            gap: 20px;
            text-align: center;
            align-items: center;
            justify-content: center;
        }

            section > div:last-child > ul > li {
                padding-bottom: 5px;
                transition: box-shadow 0.3s ease-in-out;
                position: relative;
                z-index: 2;
                transition: 0.2s ease-in-out;
                display: flex;
                gap: 5px;
                margin: 5px 10px;
            }



                section > div:last-child > ul > li:hover::before {
                    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200%25' height='100%25'%3E%3Cdefs%3E%3Cstyle%3E .wave%7B animation:wave 2s linear infinite; animation-delay:0s; stroke:%23ef7c00; stroke-width:2; stroke-dashoffset:0px; stroke-dasharray:80px; stroke-linecap:round; fill:none; %7D @keyframes wave%7B 25%25%7B stroke-dashoffset:-80px; %7D 50%25%7B stroke-dashoffset:-80px; %7D 100%25%7B stroke-dashoffset:-160px; %7D %7D %3C/style%3E%3C/defs%3E%3Cpattern id='wavePattern' x='0' y='0' width='80' height='80' patternUnits='userSpaceOnUse'%3E%3Cpath class='wave' d='M 0 40 L 50 40 L 80 40 L 54 44 L 54 36 L 80 40 ' /%3E%3C/pattern%3E%3Crect x='0' y='0' width='100%25' height='100%25' fill='url(%23wavePattern)'%3E%3C/rect%3E%3C/svg%3E") calc(100% - 10px) 50% / 40px 80px no-repeat, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200%25' height='100%25'%3E%3Cdefs%3E%3Cstyle%3E .wave%7B stroke:%23ef7c00; stroke-width:2; stroke-linecap:round; fill:none; %7D %3C/style%3E%3C/defs%3E%3Cpattern id='wavePattern' x='0' y='0' width='80' height='80' patternUnits='userSpaceOnUse'%3E%3Cpath fill='none' class='wave' d='M 0 40 Q 20 40 40 40 Q 60 40 80 40' /%3E%3C/pattern%3E%3Crect x='0' y='0' width='100%25' height='100%25' fill='url(%23wavePattern)'%3E%3C/rect%3E%3C/svg%3E") 0px 50% / calc(100% - 25px) 80px no-repeat;
                }

                section > div:last-child > ul > li:hover::before {
                    transition: transform 300ms cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 300ms ease-in-out;
                    transform-origin: right;
                    transform: scaleX(1);
                    opacity: 1;
                    width: 90%;
                    margin-left: 10%;
                    margin-bottom: 4%;
                }

                section > div:last-child > ul > li::before {
                    content: "";
                    position: absolute;
                    width: 100%;
                    height: 80px;
                    left: 0;
                    bottom: -45px;
                    z-index: -1;
                    transform-origin: right;
                    transform: scaleX(0);
                    transition: transform 300ms cubic-bezier(0.175, 0.885, 0.32, 1), opacity 300ms ease-in-out;
                    opacity: 0;
                }

@media (max-width: 480px) {
    section > div:last-child > ul {
        display: flex;
        flex-direction: column;
        gap: 20px;
        text-align: center;
        align-items: center;
        justify-content: center;
    }

        section > div:last-child > ul > li {
            border-bottom: 2px solid var(--lmc-orange);
        }
    section > div:first-of-type > img {
        width: 60%;
    }
}