.my-banner {
    --banner-gradient: linear-gradient(
        90deg,
        #FFB347,
        #FFCC33,
        #FFA500,
        #FFD700,
        #FFB347
    );

    width: 100%;
    text-align: center;
    position: relative;

    background-image: var(--banner-gradient);
    background-size: 300% 300%;
    animation: gradientMove 20s ease-in-out infinite;

    color: white;
    font-size: 1.1em;
    font-weight: 400;

    margin-bottom: 60px;
    padding: 10px 10px;

    border: 2px solid rgba(255,255,255,.3);
    overflow: visible;
}

/* LA CURVA È UN LAYER DAVANTI, NON DIETRO */
.my-banner::after {
    content: "";
    position: absolute;

    top: 100%;
    left: 0;
    width: 100%;
    height: 25px;

    background-image: var(--banner-gradient);
    background-size: 300% 300%;
    animation: gradientMove 20s ease-in-out infinite;

    /* curva piena verso il basso */
    border-bottom-left-radius: 100% 120%;
    border-bottom-right-radius: 100% 120%;

    /* evita che venga coperta da altri elementi */
    z-index: 2;
    pointer-events: none;
}

@keyframes gradientMove {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}