body {
    background: radial-gradient(circle at 12% 8%, var(--color-bg-accent-top-start), transparent 32rem), radial-gradient(circle at 88% 10%, var(--color-bg-accent-top-end), transparent 34rem), radial-gradient(circle at 18% 92%, var(--color-bg-accent-bottom-start), transparent 36rem), radial-gradient(circle at 86% 88%, var(--color-bg-accent-bottom-end), transparent 34rem), linear-gradient(180deg, var(--color-bg-accent-wash), transparent 28rem), var(--color-bg);
    color: var(--color-text);

    &::before {
        content: "";
        position: fixed;
        inset: 0;
        pointer-events: none;
        background: linear-gradient(rgb(115 255 254 / 0.035) 1px, transparent 1px), linear-gradient(90deg, rgb(115 255 254 / 0.065) 1px, transparent 1px);
        background-size: 4rem 4rem;
        mask-image: radial-gradient(circle at center, black, transparent 72%);
    }

    overflow-y: hidden;
}

/*#region Scrollbars*/
*::-webkit-scrollbar {
    inline-size: 0.25rem;
    block-size: 0.25rem;
}

*::-webkit-scrollbar-track {
    background: transparent;
}

*::-webkit-scrollbar-thumb {
    background: var(--color-primary-soft);
    border: 1px solid var(--color-primary);
    border-radius: var(--radius-full);
}

    *::-webkit-scrollbar-thumb:hover {
        background: var(--color-primary);
    }

*::-webkit-scrollbar-corner {
    background: var(--color-layout);
}
/*#endregion Scrollbars*/


/*  Image */
.u-img-wrapper {
    height: 100%;
    position: relative;
    overflow: hidden;

    & > img {
        position: absolute;
        display: block;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center center;
    }

    &[data-aspect-ratio="4/3"] {
        aspect-ratio: 4 / 3;
    }

    &[data-aspect-ratio="16/9"] {
        aspect-ratio: 16 / 9;
    }

    &[data-aspect-ratio="21/9"] {
        aspect-ratio: 21 / 9;
    }
}