@media (max-width: 768px) {

    #hero-section {
        overflow-x: hidden;
    }

    .hero-greeting,
    .hero-subtitle {
        text-align: left;
        padding-left: 5%;
        padding-right: 5%;
    }

    .hero-pronunciation {
        display: block;
        position: absolute;
        bottom: 20vh;
        left: 5%;
        width: 70%;
        font-size: 16px;
        line-height: 1.4;
        letter-spacing: 2px;
        text-align: left;
        padding-left: 0;
    }

    .hero {
        justify-content: flex-start;
        padding-top: 27vh;
        align-items: flex-start;
        overflow-x: hidden;
        overflow-y: hidden;
        /* Fully contain the translate overlow within the screen */
    }

    .static-name {
        font-size: 25vw;
        padding-left: 5%;
    }

    .lanyard-container {
        --scale: 0.55;
    }

    .hero-subtitle {
        font-size: 14px;
    }

    .skill-icon {
        width: 50px;
        height: 50px;
        z-index: 1;
    }

    .skill-icons-layer {
        left: 0;
        width: 100vw;
        z-index: 2;
        /* Ensure it hides behind the text (.static-name is 5) */
    }

    .dynamic-island:hover {
        width: 90%;
    }

    .banner-image {
        opacity: 1;
        right: -10vw;
        /* Push to the right edge */
        bottom: 0px;
        /* Keep it on the bottom right corner */
        top: auto;
        transform: none;
        height: 70vh;
        z-index: 10;
        /* Behind other hero content */
        max-width: none;
    }
}