.slides > .section.sectionPanel {

    --bgColor: var(--color-background);
    --fgColor: var(--color-base);
    --borderColor: hsl(from var(--color-base) h calc(s * .8) 30);

    color: var(--fgColor);

    & > .wrapper {
        border-radius: var(--border-radius-bezel-outer);
    }

    &.bezel {
        & > .wrapper {

            padding: var(--bezel-width);

            @media all and (max-width: 400px) {
                padding: var(--bezel-width-small-screen);
            }

            border: solid hsl(var(--hue) var(--saturation) 60% / var(--bezel-border-transparency-ondark)) 1px;
            background: hsl(var(--hue) var(--saturation) 60% / var(--bezel-transparency-ondark));
            backdrop-filter: blur(var(--bezel-frosting-blur));

            border: solid var(--borderColor) 1px;

            & > .innerWrapper {
                border-radius: var(--border-radius-bezel-inner);
                overflow: hidden;
                background: var(--bgColor);
            }
        }
    }

    &.glow {
        & > .wrapper {
            box-shadow: 0 0 100px hsl(var(--hue) var(--saturation) 30%);
        }
    }

    &.negativeTopMargin {
        /* Makes it easier for the user to see this section after a fullscreen section like the SectionIntro, which takes all screen height. With the negative margin, the glow starts to show at the bottom and the content appears after only a slight scroll down, instead of having to scroll a little more to see the content, to prevent the sensation of nothing appearing after scrolling down. */
        margin-top: -50px;
    }
}

.slides.dark > .section.sectionPanel {
    --bgColor: var(--color-base-darker);
    --fgColor: #fff;
    --borderColor: hsl(from var(--color-base) h calc(s * .8) 30);
    --hue: var(--color-base-hue);
    --saturation: var(--color-base-saturation);
}