<commit_before>@use "../setup";

/* ==========================================================================
   Styling and layout for screen media at 1st breakpoint
   ========================================================================== */

@media screen and (min-width: setup.$breakpoint-1) {

    /**
     * Screen size-specific elements.
     */

    .screen-small {
        display: none;
    }

    .screen-large {
        display: block; // TODO: use `display: revert` when browser support is widespread.
    }

    /**
     * Grid container.
     */

    .layout-container {
        display: grid;
        gap: 0 2rem;
        grid-template-columns: repeat(12, 1fr);

        &.gallery {
            gap: 2rem;
        }

        &.gap-0 {
            gap: 0;
        }

        &.gap-1 {
            gap: 2px;
        }

        &.gap-2 {
            gap: 4px;
        }

        &.gap-3 {
            gap: 0.5rem;
        }

        &.gap-4 {
            gap: 1rem;
        }
    }

    .layout-align-justify {
        align-items: center;
        justify-content: space-between;
    }

    .layout-align-block-start {
        align-items: start;
    }

    .layout-align-block-end {
        align-items: end;
    }

    .layout-align-block-center {
        align-items: center;
    }

    .layout-align-inline-start,
    .layout-align-inline-end,
    .layout-align-inline-center {
        display: flex;
        gap: 0 !important;
        flex-wrap: wrap;
        margin: -1em;

        > * {
            box-sizing: border-box;
            min-width: 0;
            padding: 1em;
        }

        &.gap-0 {
            margin: 0;

            > * {
                padding: 0;
            }
        }

        &.gap-1 {
            margin: -1px;

            > * {
                padding: 1px;
            }
        }

        &.gap-2 {
            margin: -2px;

            > * {
                padding: 2px;
            }
        }

        &.gap-3 {
            margin: -0.25rem;

            > * {
                padding: 0.25rem;
            }
        }

        &.gap-4 {
            margin: -0.5rem;

            > * {
                padding: 0.5rem;
            }
        }
    }


    .layout-align-inline-start {
        justify-content: flex-start;
    }

    .layout-align-inline-end {
        justify-content: flex-end;
    }

    .layout-align-inline-center {
        justify-content: center;
    }

    /**
     * Generate sizes all for grid column cells.
     *
     * We will then adjust them at various breakpoints.
     *
     * Example HTML:
     *
     * <div class="layout-1col"></div>
     *
     * <div class="layout-2col">
     * <div class="layout-2col">
     *
     * <div class="layout-4col-3span"></div>
     * <div class="layout-4col"></div>
     */

    .layout-1col,
    .layout-2col,
    .layout-3col,
    .layout-3col-2span,
    .layout-4col-alt,<commit_msg>Safeguards<commit_after>@use "../setup";

/* ==========================================================================
   Styling and layout for screen media at 1st breakpoint
   ========================================================================== */

@media screen and (min-width: setup.$breakpoint-1) {

    /**
     * Screen size-specific elements.
     */

    .screen-small {
        display: none;
    }

    .screen-large {
        display: block; // TODO: use `display: revert` when browser support is widespread.
    }

    /**
     * Grid container.
     */

    .layout-container {
        display: grid;
        gap: 0 2rem;
        grid-template-columns: repeat(12, 1fr);

        &.gallery {
            gap: 2rem;
        }

        &.gap-0 {
            gap: 0;
        }

        &.gap-1 {
            gap: 2px;
        }

        &.gap-2 {
            gap: 4px;
        }

        &.gap-3 {
            gap: 0.5rem;
        }

        &.gap-4 {
            gap: 1rem;
        }
    }

    .layout-align-justify {
        align-items: center;
        justify-content: space-between;
    }

    .layout-align-top,
    .layout-align-block-start {
        align-items: start;
    }

    .layout-align-bottom,
    .layout-align-block-end {
        align-items: end;
    }

    .layout-align-block-center {
        align-items: center;
    }

    .layout-align-left,
    .layout-align-inline-start,
    .layout-align-right,
    .layout-align-inline-end,
    .layout-align-inline-center {
        display: flex;
        gap: 0 !important;
        flex-wrap: wrap;
        margin: -1em;

        > * {
            box-sizing: border-box;
            min-width: 0;
            padding: 1em;
        }

        &.gap-0 {
            margin: 0;

            > * {
                padding: 0;
            }
        }

        &.gap-1 {
            margin: -1px;

            > * {
                padding: 1px;
            }
        }

        &.gap-2 {
            margin: -2px;

            > * {
                padding: 2px;
            }
        }

        &.gap-3 {
            margin: -0.25rem;

            > * {
                padding: 0.25rem;
            }
        }

        &.gap-4 {
            margin: -0.5rem;

            > * {
                padding: 0.5rem;
            }
        }
    }

    .layout-align-left,
    .layout-align-inline-start {
        justify-content: flex-start;
    }

    .layout-align-right,
    .layout-align-inline-end {
        justify-content: flex-end;
    }

    .layout-align-inline-center {
        justify-content: center;
    }

    /**
     * Generate sizes all for grid column cells.
     *
     * We will then adjust them at various breakpoints.
     *
     * Example HTML:
     *
     * <div class="layout-1col"></div>
     *
     * <div class="layout-2col">
     * <div class="layout-2col">
     *
     * <div class="layout-4col-3span"></div>
     * <div class="layout-4col"></div>
     */

    .layout-1col,
    .layout-2col,
    .layout-3col,
    .layout-3col-2span,
    .layout-4col-alt,
{'fraction_non_alphanumeric': 0.1782310650392911, 'fraction_numerical': 0.018725965557599065, 'mean_word_length': 1.1832116788321168, 'pattern_counts': {'":': 0, '<': 19, '<?xml version=': 0, '>': 31, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '963450', 'n_tokens_mistral': 1987, 'n_tokens_neox': 1829, 'n_words': 327}