/* Import google font */
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');

:root {
    --roboto: font-family: "Roboto", sans-serif;

    --unit: 8px;
    --gutter: calc(var(--unit) * 2);

    --white: #ffffff;
    --blue: #007bff;

    --link-underline-size: 2px;

    /* bullet point */
    --divider-size: calc(var(--unit) * .5);
    --divider-gap: calc(var(--unit) * 1.5);
    --divider-offset: calc(0px - var(--unit) * 1.5);

    /* descr */
    --descr-max-width: 800px;
    --descr-num-elements: 1.3;
    --descr-gap: calc(var(--unit) * 6);
    --descr-stairstep: calc(var(--unit) * 8);
    --descr-border-size: 2px;
}
@media (max-width: 767.98px) {
    .description {
        overflow: auto;
        flex-wrap: nowrap !important;
        scroll-snap-type: x proximity;
        scroll-behavior: smooth;
        && .description__content {
            flex: 0 0 auto;
            flex-shrink: 0;
            scroll-snap-align: start;
            padding-top: 8px;
            padding-left: 10px;
            &&::before {
                top: 0;
                left: 0;
            }
        }
    }
}
@media (min-width: 576px) {
    :root {
        /* descr mobile */
        --descr-num-elements: 2;
    }
}
@media (max-width: 767.98px) {
    /* descr mobile */
    .description {
        margin-bottom: calc(var(--descr-gap) / 2);
    }
}
@media (min-width: 768px) {
    :root {
        /* descr desktop */
        --descr-num-elements: 3;
    }

    /* descr desktop */
    .description__content:nth-child(3n + 2) {
        margin-top: var(--descr-stairstep);
    }
    .description__content:nth-child(3n + 3) {
        margin-top: calc(var(--descr-stairstep) * 2);
    }
    .description__content:nth-child(3n + 4),
    .description__content:nth-child(3n + 5),
    .description__content:nth-child(3n + 6) {
        transform: translateY(calc(0px - var(--descr-stairstep) * 1));
    }
    main section.reset-padding {
        padding-bottom: 0;
    }
    footer section.reset-padding {
        padding-top: 0;
    }
}