h1 {
    font-size: 35px;
    line-height: 40px;
}

:root {
    --spring-easing: linear(
    0, 0.002, 0.01 0.9%, 0.038 1.8%, 0.156, 0.312 5.8%, 0.789 11.1%, 1.015 14.2%,
    1.096, 1.157, 1.199, 1.224 20.3%, 1.231, 1.231, 1.226, 1.214 24.6%,
    1.176 26.9%, 1.057 32.6%, 1.007 35.5%, 0.984, 0.968, 0.956, 0.949 42%,
    0.946 44.1%, 0.95 46.5%, 0.998 57.2%, 1.007, 1.011 63.3%, 1.012 68.3%,
    0.998 84%, 1
);
    --hue: 0deg;
    --spring-duration: 1.66s;
    --a: 0%;
}
.content-2 .region-content-2 > div:nth-child(4) .field--name-body button,
.page-view--product .view-empathy-cards .view-footer .pager {
    --a: 0%;
    --hue: 0deg;
    --x: 50;
    --y: 50;
    --button: hsl(var(--hue), 100%, 50%);
    --edge: 20px;
    --size: 2.1em;
    --size2: 3.3em;
    border: none;
    background: transparent;
    color: #fff;
    font-size: 1.6em;
    text-transform: uppercase;
    position: relative;
    padding: calc(var(--size)) calc(var(--size2)*1.5);
    animation: color 20s linear infinite both;
    transition: 
        --a .5s ease-in-out, 
        scale var(--spring-duration) var(--spring-easing);
    scale: 0.92;
    isolation: isolate;

}
.content-2 .region-content-2 > div:nth-child(4) .field--name-body button:hover,
.page-view--product .view-empathy-cards .view-footer .pager:hover {
    --a: 100%;
    transition-duration: .5s, 1s;
    box-shadow: none;
    opacity: 1;
    scale: 1;
}
.content-2 .region-content-2 > div:nth-child(4) .field--name-body button:before,
.page-view--product .view-empathy-cards .view-footer .pager:before {
    content: "";
    position: absolute;
    inset: 0em;
    /** here's the magic. A blur and a svg filter */
    filter: blur(12px) url(#goo) drop-shadow(0 .25em .5em hsla(0deg, 0%, 0%, 0.8)); 
    /** followed by a radial-gradient which causes the
    gooey effect to follow mouse-position */
    background-image:
        linear-gradient(0deg,var(--button),var(--button)),
        radial-gradient(
            40% 70% at calc(var(--x) * 1%) calc(var(--y) * 1%),
            hsla(var(--hue), 77%, 77%, var(--a)) 0%,
            transparent 90%
        );
    /** and finally a background-clip so the radial-gradient
    is larger than the linear-gradient */
    background-clip: content-box, border-box;
    padding: 24px;
    z-index: -1;
    border: inherit;
    animation: color 20s linear infinite both;
}

@keyframes color {
    from {
        --hue: 0deg;
    }
    to {
        --hue: 360deg;
    }
}
@media (max-width: 767.98px) {
    .content-2 .region-content-2 > div:nth-child(4) .field--name-body button,
    .page-view--product .view-empathy-cards .view-footer .pager {
        --size: 2.5em;
        --size2: 3.2em;
        font-size: 1.4em;
    }
}