*, ::before, ::after {
        --tw-border-spacing-x: 0;
        --tw-border-spacing-y: 0;
        --tw-translate-x: 0;
        --tw-translate-y: 0;
        --tw-rotate: 0;
        --tw-skew-x: 0;
        --tw-skew-y: 0;
        --tw-scale-x: 1;
        --tw-scale-y: 1;
        --tw-pan-x:  ;
        --tw-pan-y:  ;
        --tw-pinch-zoom:  ;
        --tw-scroll-snap-strictness: proximity;
        --tw-gradient-from-position:  ;
        --tw-gradient-via-position:  ;
        --tw-gradient-to-position:  ;
        --tw-ordinal:  ;
        --tw-slashed-zero:  ;
        --tw-numeric-figure:  ;
        --tw-numeric-spacing:  ;
        --tw-numeric-fraction:  ;
        --tw-ring-inset:  ;
        --tw-ring-offset-width: 0px;
        --tw-ring-offset-color: #fff;
        --tw-ring-color: rgb(59 130 246 / 0.5);
        --tw-ring-offset-shadow: 0 0 #0000;
        --tw-ring-shadow: 0 0 #0000;
        --tw-shadow: 0 0 #0000;
        --tw-shadow-colored: 0 0 #0000;
        --tw-blur:  ;
        --tw-brightness:  ;
        --tw-contrast:  ;
        --tw-grayscale:  ;
        --tw-hue-rotate:  ;
        --tw-invert:  ;
        --tw-saturate:  ;
        --tw-sepia:  ;
        --tw-drop-shadow:  ;
        --tw-backdrop-blur:  ;
        --tw-backdrop-brightness:  ;
        --tw-backdrop-contrast:  ;
        --tw-backdrop-grayscale:  ;
        --tw-backdrop-hue-rotate:  ;
        --tw-backdrop-invert:  ;
        --tw-backdrop-opacity:  ;
        --tw-backdrop-saturate:  ;
        --tw-backdrop-sepia:  ;
        --tw-contain-size:  ;
        --tw-contain-layout:  ;
        --tw-contain-paint:  ;
        --tw-contain-style:  ;
}

::backdrop {
        --tw-border-spacing-x: 0;
        --tw-border-spacing-y: 0;
        --tw-translate-x: 0;
        --tw-translate-y: 0;
        --tw-rotate: 0;
        --tw-skew-x: 0;
        --tw-skew-y: 0;
        --tw-scale-x: 1;
        --tw-scale-y: 1;
        --tw-pan-x:  ;
        --tw-pan-y:  ;
        --tw-pinch-zoom:  ;
        --tw-scroll-snap-strictness: proximity;
        --tw-gradient-from-position:  ;
        --tw-gradient-via-position:  ;
        --tw-gradient-to-position:  ;
        --tw-ordinal:  ;
        --tw-slashed-zero:  ;
        --tw-numeric-figure:  ;
        --tw-numeric-spacing:  ;
        --tw-numeric-fraction:  ;
        --tw-ring-inset:  ;
        --tw-ring-offset-width: 0px;
        --tw-ring-offset-color: #fff;
        --tw-ring-color: rgb(59 130 246 / 0.5);
        --tw-ring-offset-shadow: 0 0 #0000;
        --tw-ring-shadow: 0 0 #0000;
        --tw-shadow: 0 0 #0000;
        --tw-shadow-colored: 0 0 #0000;
        --tw-blur:  ;
        --tw-brightness:  ;
        --tw-contrast:  ;
        --tw-grayscale:  ;
        --tw-hue-rotate:  ;
        --tw-invert:  ;
        --tw-saturate:  ;
        --tw-sepia:  ;
        --tw-drop-shadow:  ;
        --tw-backdrop-blur:  ;
        --tw-backdrop-brightness:  ;
        --tw-backdrop-contrast:  ;
        --tw-backdrop-grayscale:  ;
        --tw-backdrop-hue-rotate:  ;
        --tw-backdrop-invert:  ;
        --tw-backdrop-opacity:  ;
        --tw-backdrop-saturate:  ;
        --tw-backdrop-sepia:  ;
        --tw-contain-size:  ;
        --tw-contain-layout:  ;
        --tw-contain-paint:  ;
        --tw-contain-style:  ;
}

    [class^="btn"]:disabled {
        /* This needs to be important to override any previous fade-in animations */
        opacity: 0.5 !important;
        cursor: not-allowed;
    }

/* 2E8C70 */

/* #FFD38F */

/* #F0F3F9 */

/* #9D8DF7 */

/* #A9A6BD */

/* This line is used as a flag for post-processing */

/* Do not change it!! */

.exercism-delete-before-this {
    color: red;
}

/* @import "./ui-kit/borders"; */

/* @import "./ui-kit/colors"; */

/* @import "./ui-kit/effects"; */

/* @import "./ui-kit/inputs"; */

/* @import "./ui-kit/shapes"; */

/* @import "./ui-kit/label"; */

/* @import "./ui-kit/tracks"; */

/* @import "./ui-kit/filters"; */

/* @import "./ui-kit/scroll"; */

/* Keep until deleted everywhere */

body.controller-docs.action-section,
body.controller-docs.action-show,
body.controller-docs.action-track_show,
body.controller-docs.action-track_index {
    padding-left: 66px;
}

body.controller-docs.action-section .auth-buttons a:nth-child(2), body.controller-docs.action-show .auth-buttons a:nth-child(2), body.controller-docs.action-track_show .auth-buttons a:nth-child(2), body.controller-docs.action-track_index .auth-buttons a:nth-child(2) {
        display: none;
}

@media (min-width: 640px) {

        body.controller-docs.action-section .auth-buttons a:nth-child(2), body.controller-docs.action-show .auth-buttons a:nth-child(2), body.controller-docs.action-track_show .auth-buttons a:nth-child(2), body.controller-docs.action-track_index .auth-buttons a:nth-child(2) {
                display: flex;
        }
}

@media (min-width: 1280px) {
    body.controller-docs.action-section,
    body.controller-docs.action-show,
    body.controller-docs.action-track_show,
    body.controller-docs.action-track_index {
        padding-left: unset;
    }
}

#page-docs-show .container {
        display: flex;
}

#page-docs-show .docs-content {
        padding-left: 16px;
        padding-right: 16px;
        padding-top: 48px;
        padding-bottom: 48px;
}

@media (min-width: 1280px) {

        #page-docs-show .docs-content {
                padding-left: 80px;
                padding-right: 80px;
        }
}

#page-docs-show .docs-content {
        flex-grow: 1;
        max-width: 100%;
}

@media (min-width: 1280px) {

        #page-docs-show .docs-content {
                max-width: 940px;
        }
}

#page-docs-show .docs-content h1 {
        font-size: 32px;
        font-weight: 700;
        color: var(--textColor1);
        line-height: 1.25;
}

@media (min-width: 768px) {

        #page-docs-show .docs-content h1 {
                font-size: 34px;
        }
}

@media (min-width: 1024px) {

        #page-docs-show .docs-content h1 {
                font-size: 39px;
        }
}

#page-docs-show .docs-content h1 {
        margin-bottom: 4px;
            overflow-wrap: anywhere;
            -webkit-hyphens: auto;
                    hyphens: auto;
}

@media (min-width: 768px) {
            #page-docs-show .docs-content h1 {
                overflow-wrap: initial;
                -webkit-hyphens: initial;
                        hyphens: initial;
            }
        }

#page-docs-show .docs-content .h1-subtitle {
        font-size: 23px;
        line-height: 170%;
        color: var(--textColor6);
}

#page-docs-show .docs-content hr.c-divider {
        margin-top: 20px;
        margin-bottom: 20px;
}

#page-docs-show .anchored-header {
        position: relative;
}

#page-docs-show .anchored-header .copy-header-link-button {
        position: absolute;
        left: -32px;
        top: 50%;
        --tw-translate-y: -50%;
        transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
        padding: 16px;
        padding-left: 0px;
        opacity: 0;
}

#page-docs-show .anchored-header .copy-header-link-button:hover {
        opacity: 1;
}

#page-docs-show .anchored-header .copy-header-link-button:hover img {
        filter: var(--c-prominent-link-icon-filter);
    }

#page-docs-show .anchored-header .copy-header-link-button:active img {
        filter: var(--textColor1-filter);
    }

#page-docs-show .anchored-header .copy-header-link-button img {
        filter: var(--textColor6-filter);
    }

#page-docs-show .anchored-header .copy-header-link-feedback {
        position: absolute;
        left: -32px;
        top: 0px;
        --tw-translate-y: -100%;
        --tw-translate-x: -50%;
        transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
        opacity: 1;
        background-color: var(--backgroundColorI);
            z-index: 101;
            padding-top: 8px;
            padding-bottom: 8px;
            padding-left: 40px;
            padding-right: 16px;
            line-height: 150%;
            color: var(--textColor1);
            border-radius: 8px;
            font-family: var(--body-font);
            font-weight: 600;
            --tw-shadow: var(--box-shadow-base);
            --tw-shadow-colored: var(--box-shadow-base);
            box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
            background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGNpcmNsZSBjeD0iOCIgY3k9IjgiIHI9IjgiIGZpbGw9IiM1OUQyQUUiLz4KPHBhdGggZD0iTTEwLjg1NjkgNS4xNDI2NEw3LjAyMzk3IDEwLjYxNzlDNi45MjEzOCAxMC43NjU0IDYuNzU0MTggMTAuODU0NSA2LjU3NDYgMTAuODU3NEM2LjM5NTAzIDEwLjg2MDQgNi4yMjQ5NyAxMC43NzY5IDYuMTE3NTYgMTAuNjMyOUw1LjE0MjU4IDkuMzMzMTIiIHN0cm9rZT0iIzEzMEI0MyIgc3Ryb2tlLXdpZHRoPSIxLjUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgo8L3N2Zz4K");
            background-repeat: no-repeat;
            background-position: 16px center;
            animation: copiedFadeOut 0.7s ease-in forwards;
}

#page-docs-show .anchored-header:hover .copy-header-link-button {
        opacity: 1;
}

#page-docs-index .header {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding-top: 40px;
}

#page-docs-index .header h1 {
        font-size: 32px;
        font-weight: 700;
        color: var(--textColor1);
        line-height: 1.25;
}

@media (min-width: 768px) {

        #page-docs-index .header h1 {
                font-size: 34px;
        }
}

@media (min-width: 1024px) {

        #page-docs-index .header h1 {
                font-size: 39px;
        }
}

#page-docs-index .header h1 {
        margin-bottom: 12px;
}

#page-docs-index .header p {
        font-size: 20px;
        line-height: 170%;
        margin-bottom: 28px;
}

#page-docs-index .header .header-icon {
            height: 80px;
            width: 80px;
            margin-bottom: 12px;
        }

#page-docs-index .using-section {
        margin-bottom: 40px;
        display: flex;
        flex-direction: column-reverse;
}

@media (min-width: 768px) {

        #page-docs-index .using-section {
                flex-direction: row;
        }
}

#page-docs-index .using-section .info {
        display: flex;
        flex-grow: 1;
        flex-direction: column;
        align-items: flex-start;
}

#page-docs-index .using-section > .c-icon {
        height: 200px;
        width: 200px;
}

@media (min-width: 768px) {

        #page-docs-index .using-section > .c-icon {
                height: 300px;
                width: 300px;
        }
}

#page-docs-index .using-section > .c-icon {
        margin: auto;
}

@media (min-width: 768px) {

        #page-docs-index .using-section > .c-icon {
                margin-left: 64px;
        }
}

#page-docs-index .using-section h2 {
        font-size: 20px;
        font-weight: 600;
        line-height: 130%;
        color: var(--textColor1);
}

@media (min-width: 768px) {

        #page-docs-index .using-section h2 {
                font-size: 24px;
        }
}

#page-docs-index .using-section h2 {
        margin-bottom: 8px;
}

#page-docs-index .using-section p {
        line-height: 160%;
}

#page-docs-index .using-section p a:not(.btn-primary) {
            color: var(--c-prominent-link-color);
            font-weight: 500;
        }

#page-docs-index .using-section p strong {
        font-weight: 500;
        color: var(--textColor2);
}

#page-docs-index .using-section p {
        font-size: 18px;
        line-height: 150%;
        margin-bottom: 20px;
}

#page-docs-index .extra-sections {
        margin-bottom: 64px;
        display: flex;
        flex-wrap: wrap;
}

#page-docs-index .extra-sections .section {
        flex-shrink: 0;
        flex-grow: 0;
        padding-top: 32px;
        padding-bottom: 32px;
        width: 100%;
}

@media (min-width: 768px) {

        #page-docs-index .extra-sections .section {
                width: 50%;
        }
}

#page-docs-index .extra-sections .section {
        position: relative;
        overflow: hidden;
            --strokeColor: var(--borderColorDocsDashed);
            --dashWeight: 1px;
            --dashLength: 20px;
            --gapPlusDashLength: 41px;
            --hiddenDash: transparent, transparent var(--dashLength),
                transparent var(--dashLength),
                transparent var(--gapPlusDashLength),
                transparent var(--gapPlusDashLength);
            --visibleDash: var(--strokeColor),
                var(--strokeColor) var(--dashLength),
                transparent var(--dashLength),
                transparent var(--gapPlusDashLength),
                var(--strokeColor) var(--gapPlusDashLength);
            --left: 0deg;
            --top: 90deg;
            --right: 180deg;
            --bottom: 270deg;

            background-size: var(--dashWeight) 100%, 100% var(--dashWeight),
                var(--dashWeight) 100%, 100% var(--dashWeight);
            background-position: 0 0, 0 0, 100% 0, 0 100%;
            background-repeat: no-repeat;
}

#page-docs-index .extra-sections .section:nth-child(1),
            #page-docs-index .extra-sections .section:nth-child(2) {
                background-image: repeating-linear-gradient(
                        var(--left),
                        var(--hiddenDash)
                    ),
                    repeating-linear-gradient(var(--top), var(--hiddenDash)),
                    repeating-linear-gradient(var(--right), var(--hiddenDash)),
                    repeating-linear-gradient(var(--bottom), var(--visibleDash));
            }

@media (min-width: 768px) {
                #page-docs-index .extra-sections .section:nth-child(1) {
                padding-right: 32px;
                    background-image: repeating-linear-gradient(
                            var(--left),
                            var(--hiddenDash)
                        ),
                        repeating-linear-gradient(var(--top), var(--hiddenDash)),
                        repeating-linear-gradient(
                            var(--right),
                            var(--visibleDash)
                        ),
                        repeating-linear-gradient(
                            var(--bottom),
                            var(--visibleDash)
                        );
        }
                #page-docs-index .extra-sections .section:nth-child(2) {
                padding-left: 32px;
                    background-image: repeating-linear-gradient(
                            var(--left),
                            var(--hiddenDash)
                        ),
                        repeating-linear-gradient(var(--top), var(--hiddenDash)),
                        repeating-linear-gradient(
                            var(--right),
                            var(--hiddenDash)
                        ),
                        repeating-linear-gradient(
                            var(--bottom),
                            var(--visibleDash)
                        );
        }
                #page-docs-index .extra-sections .section:nth-child(3) {
                padding-right: 32px;
                    background-image: repeating-linear-gradient(
                            var(--left),
                            var(--hiddenDash)
                        ),
                        repeating-linear-gradient(var(--top), var(--hiddenDash)),
                        repeating-linear-gradient(
                            var(--right),
                            var(--visibleDash)
                        ),
                        repeating-linear-gradient(
                            var(--bottom),
                            var(--hiddenDash)
                        );
        }
            }

#page-docs-index .extra-sections .section .c-icon.header-icon {
                height: 64px;
                margin-bottom: 16px;
            }

#page-docs-index .extra-sections .section h2 {
        font-size: 20px;
        font-weight: 600;
        line-height: 130%;
        color: var(--textColor1);
}

@media (min-width: 768px) {

        #page-docs-index .extra-sections .section h2 {
                font-size: 24px;
        }
}

#page-docs-index .extra-sections .section h2 {
        margin-bottom: 8px;
}

#page-docs-index .extra-sections .section p {
        line-height: 160%;
}

#page-docs-index .extra-sections .section p a:not(.btn-primary) {
            color: var(--c-prominent-link-color);
            font-weight: 500;
        }

#page-docs-index .extra-sections .section p strong {
        font-weight: 500;
        color: var(--textColor2);
}

#page-docs-index .extra-sections .section p {
        font-size: 18px;
        line-height: 150%;
        margin-bottom: 16px;
}

#page-docs-index .tracks-section {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding-bottom: 40px;
}

#page-docs-index .tracks-section h2 {
        font-size: 28px;
        font-weight: 700;
        line-height: 140%;
        color: var(--textColor1);
}

@media (min-width: 768px) {

        #page-docs-index .tracks-section h2 {
                font-size: 31px;
        }
}

#page-docs-index .tracks-section h2 {
        margin-bottom: 64px;
}

#page-docs-tracks .header {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding-top: 40px;
}

#page-docs-tracks .header h1 {
        font-size: 32px;
        font-weight: 700;
        color: var(--textColor1);
        line-height: 1.25;
}

@media (min-width: 768px) {

        #page-docs-tracks .header h1 {
                font-size: 34px;
        }
}

@media (min-width: 1024px) {

        #page-docs-tracks .header h1 {
                font-size: 39px;
        }
}

#page-docs-tracks .header h1 {
        margin-bottom: 12px;
}

#page-docs-tracks .header p {
        font-size: 20px;
        line-height: 170%;
        margin-bottom: 28px;
}

.c-docs-nav {
        --tw-bg-opacity: 1;
        background-color: rgb(var(--backgroundColorA-RGB) / var(--tw-bg-opacity, 1));
        padding-top: 12px;
}

.c-docs-nav .container {
        display: flex;
}

.c-docs-nav nav.lhs {
        flex-grow: 1;
        overflow: auto;
}

.c-docs-nav ul {
        display: flex;
        align-items: center;
        white-space: nowrap;
}

.c-docs-nav li {
        margin-right: 40px;
        border-bottom-width: 3px;
        border-color: transparent;
}

.c-docs-nav li:last-child {
        margin-right: 0px;
}

.c-docs-nav li a {
        font-size: 16px;
        font-weight: 500;
        line-height: 200%;
        color: var(--textColor6);
        margin-top: 8px;
        margin-bottom: 8px;
        display: block;
}

.c-docs-nav li a .c-icon {
                height: 24px;
                width: 24px;
        filter: var(--textColor6-filter);
            }

.c-docs-nav li:hover a {
        color: var(--textColor1);
}

.c-docs-nav li.selected {
        border-color: var(--colorPurpleToBrightPurple);
}

.c-docs-nav li.selected a {
        color: var(--colorPurpleToBrightPurple);
}

.c-docs-nav li.api a {
        font-weight: 600;
        color: var(--colorPurpleToBrightPurple);
}

.c-docs-side-nav {
        position: fixed;
        top: 0px;
        left: 0px;
        bottom: 0px;
}

@media (min-width: 1280px) {

        .c-docs-side-nav {
                position: static;
        }
}

.c-docs-side-nav {
        z-index: 100;
        --tw-bg-opacity: 1;
        background-color: rgb(var(--backgroundColorA-RGB) / var(--tw-bg-opacity, 1));
}

@media (min-width: 1280px) {

        .c-docs-side-nav {
                z-index: 1;
                background-color: var(--backgroundColorB);
        }
}

.c-docs-side-nav {
        border-color: var(--borderColor6);
}

@media (min-width: 1280px) {

        .c-docs-side-nav {
                border-right-width: 1px;
        }
}

.c-docs-side-nav {
        padding: 16px;
        padding-bottom: 0px;
}

@media (min-width: 1280px) {

        .c-docs-side-nav {
                padding-top: 32px;
                padding-right: 32px;
                padding-left: 0px;
        }
}

.c-docs-side-nav {
        --tw-shadow: 0 0 10px 10px rgba(0,0,0,0.2);
        --tw-shadow-colored: 0 0 10px 10px var(--tw-shadow-color);
        box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

@media (min-width: 1280px) {

        .c-docs-side-nav {
                --tw-shadow: 0 0 #0000;
                --tw-shadow-colored: 0 0 #0000;
                box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
        }
}

.c-docs-side-nav .trigger-label {
        display: block;
        cursor: pointer;
}

@media (min-width: 1280px) {

        .c-docs-side-nav .trigger-label {
                display: none;
        }
}

.c-docs-side-nav .trigger-label {
        width: -moz-fit-content;
        width: fit-content;
    }

.c-docs-side-nav .trigger-label .icon-bar {
        margin: 4px;
        display: block;
        background-color: var(--textColor1);
            width: 22px;
            height: 2px;
            transition: transform 0.2s;
}

.c-docs-side-nav .trigger-label .top-bar {
            transform: rotate(0);
        }

.c-docs-side-nav .trigger-label .middle-bar {
            opacity: 1;
        }

.c-docs-side-nav .c-docs-side-nav-ul {
        height: 100%;
        overflow: auto;
        margin-right: -16px;
        padding-right: 16px;
}

.c-docs-side-nav .side-menu-trigger:checked + label .top-bar {
                transform: rotate(45deg);
                transform-origin: 10% 10%;
            }

.c-docs-side-nav .side-menu-trigger:checked + label .middle-bar {
                opacity: 0;
            }

.c-docs-side-nav .side-menu-trigger:checked + label .bottom-bar {
                transform: rotate(-45deg);
                transform-origin: 10% 90%;
            }

.c-docs-side-nav .side-menu-trigger:checked ~ ul {
        display: block;
}

.c-docs-side-nav .side-menu-trigger:checked ~ ul ul {
        display: block;
}

.c-docs-side-nav h2 {
        font-size: 20px;
        font-weight: 600;
        line-height: 140%;
        color: var(--textColor1);
        margin-bottom: 16px;
        display: none;
}

@media (min-width: 1280px) {

        .c-docs-side-nav h2 {
                display: block;
        }
}

.c-docs-side-nav ul {
        margin-top: 16px;
        display: none;
}

@media (min-width: 1280px) {

        .c-docs-side-nav ul {
                margin: 0px;
                display: block;
        }
}

.c-docs-side-nav ul li {
        margin-bottom: 16px;
}

.c-docs-side-nav ul li a {
        display: block;
        font-size: 16px;
        font-weight: 500;
        line-height: 140%;
}

.c-docs-side-nav ul li.header {
        display: flex;
        align-items: center;
}

.c-docs-side-nav ul li.header a {
        display: flex;
        flex-grow: 1;
        font-weight: 600;
        color: var(--textColor2);
}

.c-docs-side-nav ul li.header a span {
        margin-right: 12px;
}

.c-docs-side-nav ul li.header a:after {
                        content: "+";
                        width: 17px;
                        font-size: 24px;
                        font-weight: 400;
                        color: var(--textColor2);
                        margin-left: auto;
                        text-align: center;
                    }

.c-docs-side-nav ul li.header.expanded a:after {
                        content: "-";
                    }

.c-docs-side-nav ul li.selected a {
        font-weight: 600;
        color: var(--colorPurpleToBrightPurple);
}

.c-docs-side-nav ul ul {
        border-left-width: 2px;
        border-color: var(--borderColor6);
        padding-left: 24px;
        margin-bottom: 12px;
}

.c-docs-tracks-list .tracks {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        -moz-column-gap: 20px;
             column-gap: 20px;
}

@media (min-width: 768px) {

        .c-docs-tracks-list .tracks {
                grid-template-columns: repeat(4, minmax(0, 1fr));
        }
}

@media (min-width: 1024px) {

        .c-docs-tracks-list .tracks {
                display: flex;
                flex-wrap: wrap;
                -moz-column-gap: 0px;
                     column-gap: 0px;
        }
}

.c-docs-tracks-list .tracks {
        align-items: flex-start;
        justify-content: center;
        justify-items: center;
}

.c-docs-tracks-list .track {
        padding-left: 8px;
        padding-right: 8px;
        padding-bottom: 56px;
        width: 20%;
        display: flex;
        flex-direction: column;
        align-items: center;
}

.c-docs-tracks-list .track .c-track-icon {
            width: 80px;
            height: 80px;
            margin-bottom: 12px;
            filter: drop-shadow(0px 5px 2px rgba(var(--track-icon-color), 0.2));
        }

.c-docs-tracks-list .track .title {
        margin-bottom: 4px;
        font-family: Source Code Pro, monospace;
        font-size: 20px;
        font-weight: 700;
        line-height: 140%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
}

.c-docs-tracks-list .track .count {
        font-family: Source Code Pro, monospace;
        font-size: 16px;
        font-weight: 500;
        line-height: 170%;
        white-space: nowrap;
}