:root {
    --backdrop: #242424;
    --radius: 14;
    --border: 2;
    --backup-border: var(--backdrop);
    --size: 200;
}

article:first-of-type {
    --base: 80;
    --spread: 500;
    --outer: 1;
}
article:last-of-type {
    --outer: 1;
    --base: 220;
    --spread: 200;
}

*,
*:after,
*:before {
    box-sizing: border-box;
}

/* Glow specific styles */
[data-glow] {
    --border-size: calc(var(--border, 2) * 1px);
    --spotlight-size: calc(var(--size, 150) * 1px);
    background-image: radial-gradient(
        var(--spotlight-size) var(--spotlight-size) at calc(var(--x, 0) * 1px)
            calc(var(--y, 0) * 1px),
        hsl(var(--hue, 0) 100% 70% / var(--bg-spot-opacity, 0.1)),
        transparent
    );
    background-color: var(--backdrop, transparent);
    background-size: calc(100% + (2 * var(--border-size))) calc(100% + (2 * var(--border-size)));
    background-position: 50% 50%;
    background-attachment: fixed;
    border: var(--border-size) solid var(--backup-border);
    position: relative;
    touch-action: none;
}

[data-glow]::before,
[data-glow]::after {
    pointer-events: none;
    content: '';
    position: absolute;
    inset: calc(var(--border-size) * -1);
    border: var(--border-size) solid transparent;
    border-radius: calc(var(--radius) * 1px);
    background-attachment: fixed;
    background-size: calc(100% + (2 * var(--border-size))) calc(100% + (2 * var(--border-size)));
    background-repeat: no-repeat;
    background-position: 50% 50%;
    mask: linear-gradient(transparent, transparent), linear-gradient(white, white);
    mask-clip: padding-box, border-box;
    mask-composite: intersect;
}

/* This is the emphasis light */
[data-glow]::before {
    background-image: radial-gradient(
        calc(var(--spotlight-size) * 0.75) calc(var(--spotlight-size) * 0.75) at
            calc(var(--x, 0) * 1px) calc(var(--y, 0) * 1px),
        var(--color-glow, hsl(var(--hue, 300) 100% 50%)) 0%,
        transparent 100%
    );
    filter: brightness(1);
}

/* This is the spotlight */
[data-glow]::after {
    background-image: radial-gradient(
        calc(var(--spotlight-size) * 0.5) calc(var(--spotlight-size) * 0.5) at
            calc(var(--x, 0) * 1px) calc(var(--y, 0) * 1px),
        var(--color-glow, hsl(0 100% 100%)) 0%,
        transparent 100%
    );
}

[data-glow] [data-glow] {
    position: absolute;
    inset: 0;
    will-change: filter;
    opacity: var(--outer, 1);
}
[data-glow] > [data-glow] {
    border-radius: calc(var(--radius) * 1px);
    border-width: calc(var(--border-size) * 20);
    filter: blur(calc(var(--border-size) * 10));
    background: none;
    pointer-events: none;
}
[data-glow] > [data-glow]::before {
    inset: -10px;
    border-width: 10px;
}
[data-glow] [data-glow] {
    border: none;
}
[data-glow] :is(a, button) {
    border-radius: calc(var(--radius) * 1px);
    border: var(--border-size) solid transparent;
}
[data-glow] :is(a, button) [data-glow] {
    background: none;
}
[data-glow] :is(a, button) [data-glow]::before {
    inset: calc(var(--border-size) * -1);
    border-width: calc(var(--border-size) * 1);
}

/* hover controls */
[data-glow-target] {
    opacity: 50%;
    transition-duration: 400ms;
    transition-property: opacity;
    transition-timing-function: ease;
}
.partner-cms-item:hover [data-glow-target] {
    opacity: 100%;
    --size: 400;
}