.Blocks {
    display: flex;
    flex-wrap: wrap;

    &.gap {
        padding: var(--base-gap);
        gap: var(--base-gap);
    }

    &.gapBig {
        padding: var(--gap-big);
        gap: var(--gap-big);
    }

    &.gapBigger {
        padding: var(--gap-bigger);
        gap: var(--gap-bigger);
    }

    & > .Block {
        max-width: 100%;

        --padding-multiplier: 1;

        @media all and (max-width: 1000px) { --padding-multiplier :.75; }
        @media all and (max-width: 800px) { --padding-multiplier :.50; }
        @media all and (max-width: 400px) { --padding-multiplier :.30; }

        @media all and (min-width: 600px) {
            min-width: 300px;
        }

        box-sizing: border-box;

        &.padding {
            padding: var(--base-gap);
        }

        &.paddingBig {
            padding: var(--gap-big);
        }

        &.paddingBigger {
            padding: calc(var(--gap-bigger) * var(--padding-multiplier));
        }

        &.paddingBiggest {
            padding: calc(var(--gap-biggest) * var(--padding-multiplier));
        }

        &.verticalAlignMiddle {
            align-self: center;
        }

        flex-grow: 1;
        flex-shrink: 1;
        width: min-content;

        & > video {
            width: 100%;
            float: left;
        }

        &:has(.Banner) {
            z-index: 1;
        }
    }
}