.slides {
    --bgColor: var(--color-base-darker);

    position: relative;
    overflow: hidden;

    --gap: var(--gap-biggest);

    display: flex;
    flex-direction: column;
    gap: var(--gap);

    box-sizing: border-box;

    &.marginBottom {
        margin-bottom: var(--gap-huge);
    }

    > .section {
        padding: 0 var(--gap);

        @media all and (max-width: 600px) {
            padding: 0 var(--gap-big);
        }

        box-sizing: border-box;

        > .wrapper {
            width: var(--content-width);
            max-width: 100%;
            margin: 0 auto;
            box-sizing: border-box;
        }

        &:last-child {
            padding-bottom: var(--gap);
        }

        &.isolated {
            padding-top: var(--gap-huge);
            padding-bottom: var(--gap-huge);
        }

        &.fullHeight {
            padding-top: var(--gap-big);
            padding-bottom: var(--gap-big);
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            justify-content: center;
        }
    }

    > canvas {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        top: 0px;

        transform: scaleX(1.2) scaleY(1.2) scaleZ(1.2) rotateX(15deg) rotateY(-13deg) rotateZ(0deg) translateX(0px) translateY(0px) translateZ(0px) skewX(0deg) skewY(0deg);

        z-index: -1;
    }

    &.markovRainSticky > canvas {
        position: fixed;
    }
}