.blockXS.blockContainer, .blockS.blockContainer, .blockM.blockContainer, .blockL.blockContainer, .blockXL.blockContainer {
    box-shadow: var(--shadowBlock) var(--colorBlackL);
    transition: background-color var(--durationS) var(--course);
}

.textCursorPointer.blockXS:hover.blockContainer, .textCursorPointer.blockS:hover.blockContainer, .textCursorPointer.blockM:hover.blockContainer, .textCursorPointer.blockL:hover.blockContainer, .textCursorPointer.blockXL:hover.blockContainer {
    transition: background-color var(--durationS) var(--course);
}

.blockXS > p, .blockXS > label, .blockXS > svg, .blockS > p, .blockS > label, .blockS > svg, .blockM > p, .blockM > label, .blockM > svg, .blockL > p, .blockL > label, .blockL > svg, .blockXL > p, .blockXL > label, .blockXL > svg {
    transition: color var(--durationS) var(--course);
}

.blockXS:hover > p, .blockXS:hover > label, .blockXS:hover > svg, .blockS:hover > p, .blockS:hover > label, .blockS:hover > svg, .blockM:hover > p, .blockM:hover > label, .blockM:hover > svg, .blockL:hover > p, .blockL:hover > label, .blockL:hover > svg, .blockXL:hover > p, .blockXL:hover > label, .blockXL:hover > svg {
    transition: color var(--durationS) var(--course);
}

.blockXS.blockContainer {
    font-family: var(--blockXS_font), sans-serif;
    border-radius: var(--blockXS_borderRadius);
    background-color: var(--blockXS_backgroundColor);
}

.blockXS > p, .blockXS > label, .blockXS > svg {
    color: var(--blockXS_textColor);
}

.textCursorPointer.blockXS:hover.blockContainer {
    background-color: var(--blockXS_backgroundColorHover);
}

.blockXS:hover > p, .blockXS:hover > label, .blockXS:hover > svg {
    color: var(--blockXS_textColorHover);
}

.blockS.blockContainer {
    font-family: var(--blockS_font), sans-serif;
    border-radius: var(--blockS_borderRadius);
    background-color: var(--blockS_backgroundColor);
}

.blockS > p, .blockS > label, .blockS > svg {
    color: var(--blockS_textColor);
}

.textCursorPointer.blockS:hover.blockContainer {
    background-color: var(--blockS_backgroundColorHover);
}

.blockS:hover > p, .blockS:hover > label, .blockS:hover > svg {
    color: var(--blockS_textColorHover);
}

.blockM.blockContainer {
    font-family: var(--blockM_font), sans-serif;
    border-radius: var(--blockM_borderRadius);
    background-color: var(--blockM_backgroundColor);
}

.blockM > p, .blockM > label, .blockM > svg {
    color: var(--blockM_textColor);
}

.textCursorPointer.blockM:hover.blockContainer {
    background-color: var(--blockM_backgroundColorHover);
}

.blockM:hover > p, .blockM:hover > label, .blockM:hover > svg {
    color: var(--blockM_textColorHover);
}

.blockL.blockContainer {
    font-family: var(--blockL_font), sans-serif;
    border-radius: var(--blockL_borderRadius);
    background-color: var(--blockL_backgroundColor);
}

.blockL > p, .blockL > label, .blockL > svg {
    color: var(--blockL_textColor);
}

.textCursorPointer.blockL:hover.blockContainer {
    background-color: var(--blockL_backgroundColorHover);
}

.blockL:hover > p, .blockL:hover > label, .blockL:hover > svg {
    color: var(--blockL_textColorHover);
}

.blockXL {
    width: 100%;
}

.blockXL.blockContainer {
    font-family: var(--blockXL_font), sans-serif;
    border-radius: var(--blockXL_borderRadius);
    background-color: var(--blockXL_backgroundColor);
}

.blockXL > p, .blockXL > label, .blockXL > svg {
    color: var(--blockXL_textColor);
}

.textCursorPointer.blockXL:hover.blockContainer {
    background-color: var(--blockXL_backgroundColorHover);
}

.blockXL:hover > p, .blockXL:hover > label, .blockXL:hover > svg {
    color: var(--blockXL_textColorHover);
}

.blockPadding {
    padding: var(--gap);
}

.blockContainer .blockPadding {
    padding-left: var(--gap) !important;
    padding-right: var(--gap) !important;
}

.blockContainer .blockPadding:first-child {
    padding-top: var(--gap) !important;
}

.blockContainer .blockPadding:last-child {
    padding-bottom: var(--gap) !important;
}

.blockResponseContainer {
    display: flex;
    flex-wrap: wrap;
}

.blockDivision {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.blockAutoContainer {
    position: relative;
    width: 100%;
    max-height: 100dvh;
}

.blockAutoContainerSmall {
    aspect-ratio: 2 / 1;
}

.blockAutoContainerLarge {
    aspect-ratio: 1;
}

.containerAll:has(.navigationBackground) .blockAutoContainer {
    max-height: calc(100dvh - 50px);
}

.blockAuto {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}

.blockLeft {
    object-position: left;
}

.blockCenter {
    object-position: center;
}

.blockRight {
    object-position: right;
}

.blockColumn {
    flex-direction: column;
}

.blockScroll {
    position: relative;
    height: 100%;
}

.blockCover {
    display: block;
    width: 100px;
    height: 100px;
    object-fit: cover;
}

.blockItem {
    box-shadow: none !important;
    border: var(--borderWidthM) var(--borderStyle) var(--colorBlackL);
    background-color: rgba(0, 0, 0, 0.05) !important;
}

.blockItemHorizontalSectionButton::before {
    counter-increment: horizontal-items;
    content: counter(horizontal-items) ".";
    margin-right: 5px;
}

.blockItemVerticalSectionButton::before {
    counter-increment: vertical-items;
    content: counter(vertical-items) ".";
    margin-right: 5px;
}

.blockItemGroupSectionButton::before {
    counter-increment: group-items;
    content: counter(group-items) ".";
    margin-right: 5px;
}

.blockItemElementSectionButton::before {
    counter-increment: element-items;
    content: counter(element-items) ".";
    margin-right: 5px;
}

.blockItemFragmentSectionButton::before {
    counter-increment: fragment-items;
    content: counter(fragment-items) ".";
    margin-right: 5px;
}

@media (prefers-color-scheme: dark) {
    .blockXS.blockContainer, .blockS.blockContainer, .blockM.blockContainer, .blockL.blockContainer, .blockXL.blockContainer {
        box-shadow: var(--shadowBlock) var(--colorBlackSD);
    }

    .blockXS.blockContainer {
        background-color: var(--blockXS_backgroundColorD);
    }

    .blockXS > p, .blockXS > label, .blockXS > svg {
        color: var(--blockXS_textColorD);
    }

    .textCursorPointer.blockXS:hover.blockContainer {
        background-color: var(--blockXS_backgroundColorHoverD);
    }

    .blockXS:hover > p, .blockXS:hover > label, .blockXS:hover > svg {
        color: var(--blockXS_textColorHoverD);
    }

    .blockS.blockContainer {
        background-color: var(--blockS_backgroundColorD);
    }

    .blockS > p, .blockS > label, .blockS > svg {
        color: var(--blockS_textColorD);
    }

    .textCursorPointer.blockS:hover.blockContainer {
        background-color: var(--blockS_backgroundColorHoverD);
    }

    .blockS:hover > p, .blockS:hover > label, .blockS:hover > svg {
        color: var(--blockS_textColorHoverD);
    }

    .blockM.blockContainer {
        background-color: var(--blockM_backgroundColorD);
    }

    .blockM > p, .blockM > label, .blockM > svg {
        color: var(--blockM_textColorD);
    }

    .textCursorPointer.blockM:hover.blockContainer {
        background-color: var(--blockM_backgroundColorHoverD);
    }

    .blockM:hover > p, .blockM:hover > label, .blockM:hover > svg {
        color: var(--blockM_textColorHoverD);
    }

    .blockL.blockContainer {
        background-color: var(--blockL_backgroundColorD);
    }

    .blockL > p, .blockL > label, .blockL > svg {
        color: var(--blockL_textColorD);
    }

    .textCursorPointer.blockL:hover.blockContainer {
        background-color: var(--blockL_backgroundColorHoverD);
    }

    .blockL:hover > p, .blockL:hover > label, .blockL:hover > svg {
        color: var(--blockL_textColorHoverD);
    }

    .blockXL.blockContainer {
        background-color: var(--blockXL_backgroundColorD);
    }

    .blockXL > p, .blockXL > label, .blockXL > svg {
        color: var(--blockXL_textColorD);
    }

    .textCursorPointer.blockXL:hover.blockContainer {
        background-color: var(--blockXL_backgroundColorHoverD);
    }

    .blockXL:hover > p, .blockXL:hover > label, .blockXL:hover > svg {
        color: var(--blockXL_textColorHoverD);
    }

    .blockItem {
        border-color: var(--colorBlackM);
    }
}

@media only screen and (max-width: 500px) {
    .blockXS {
        width: calc(25% - ((var(--gap) * 3) / 4));
    }

    .blockS {
        width: calc((100% / 3) - ((var(--gap) * 2) / 3));
    }

    .blockM {
        width: calc(50% - (var(--gap) / 2));
    }

    .blockL {
        width: 100%;
    }

    .blockResponse1, .blockResponse2, .blockResponse3, .blockResponse4 {
        flex: 100%;
    }

    .blockResponse1, .blockResponse4 {
        order: 1;
    }

    .blockResponse2, .blockResponse3 {
        order: 2;
    }
}

@media only screen and (min-width: 501px) and (max-width: 1000px) {
    .blockXS {
        width: calc(20% - ((var(--gap) * 4) / 5));
    }

    .blockS {
        width: calc(25% - ((var(--gap) * 3) / 4));
    }

    .blockM {
        width: calc((100% / 3) - ((var(--gap) * 2) / 3));
    }

    .blockL {
        width: calc(50% - (var(--gap) / 2));
    }

    .blockResponse1, .blockResponse2, .blockResponse3, .blockResponse4 {
        flex: 100%;
    }

    .blockResponse1, .blockResponse4 {
        order: 1;
    }

    .blockResponse2, .blockResponse3 {
        order: 2;
    }

    .blockResponseContainer > .blockResponseImage {
        max-width: clamp(440px, 70%, 550px);
    }
}

@media only screen and (min-width: 1001px) {
    .blockXS {
        width: calc((100% / 6) - ((var(--gap) * 5) / 6));
    }

    .blockS {
        width: calc(20% - ((var(--gap) * 4) / 5));
    }

    .blockM {
        width: calc(25% - ((var(--gap) * 3) / 4));
    }

    .blockL {
        width: calc((100% / 3) - ((var(--gap) * 2) / 3));
    }

    .blockResponse1, .blockResponse2, .blockResponse3, .blockResponse4 {
        flex: 50%;
    }

    .blockResponse1, .blockResponse3 {
        order: 1;
    }

    .blockResponse2, .blockResponse4 {
        order: 2;
    }
}