/* Base Classes */
.loader {
    --loader-size: calc(var(--block-size) / 2);
    --loader-size-half: calc(var(--loader-size) / 2);
    --loader-size-half-neg: calc(var(--loader-size-half) * -1);
    --dot-size-half: calc(var(--dot-size) / 2);
    --dot-size-half-neg: calc(var(--dot-size-half) * -1);

    display: grid;
    place-items: center;
    position: relative;
}

.loader::before,
.loader::after {
    content: '';
    position: absolute;
}

.loader-container {
    --block-size: 200px;
    --dot-size: 15px;
    --anim-duration: 3s;
    --background-color: rgba(0, 0, 0, 0.64);

    display: grid;
}

.loader-container-item {
    display: grid;
    place-items: center;
}