.blockLargeElement {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    border-radius: var(--borderRadius);
    background-color: var(--gray);
    overflow: hidden;
    box-shadow: 0 0 4px 0 var(--black);
}

.blockLargeElement4 {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
}

.blockContainer {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    justify-items: center;
    gap: 10px;
}

.blockSmallElementColor, .blockSmallElementImage {
    border-radius: var(--borderRadius);
    box-shadow: 0 0 4px 0 var(--black);
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.blockSmallElementColor *, .blockSmallElementImage * {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.blockSmallElementColor * {
    color: var(--white) !important;
}

.blockSmallElementColor {
    background-color: var(--black);
}

.blockLargeElement img, .blockSmallElementColor img, .blockSmallElementImage img {
    width: 100%;
    height: auto;
    aspect-ratio: 2 / 1;
    object-fit: cover;
}

.blockBackground, .blockSmallElementImage {
    background-color: var(--gray);
    background-image: url(../../files/basics/shadow.webp),
    url(../../files/basics/shadow.png);
    background-position: center;
    background-attachment: fixed;
}

.blockForm {
    width: 100%;
    background-color: var(--gray);
    border-radius: var(--borderRadius);
    padding: 5px;
    overflow: hidden;
    box-shadow: 0 0 4px 0 var(--black);
}

.blockSmallResponse {
    position: relative;
}

.blockStep {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    overflow: hidden;
}

@media (prefers-color-scheme: dark) {
    .blockLargeElement, .blockSmallElementColor, .blockSmallElementImage, .blockBackground, .blockForm {
        background-color: var(--grayD);
    }

    .blockSmallElementColor * {
        color: var(--blackD) !important;
    }
}

@media only screen and (max-width: 600px) {
    .blockLargeElement1 {
        flex: 0 0 calc(100% - 10px);
        margin: 0 5px;
        order: 3;
    }

    .blockLargeElement2 {
        flex: 0 0 calc(100% - 10px);
        margin: 0 5px 5px;
        order: 4;
    }

    .blockLargeElement3 {
        flex: 0 0 100%;
        order: 1;
    }

    .blockLargeElement4 {
        flex: 0 0 calc(100% - 10px);
        margin: 0 5px;
        order: 2;
    }

    .blockSmallElementColor, .blockSmallElementImage {
        flex: 0 0 100%;
    }

    .blockSmallResponse {
        width: calc(50% - 5px);
    }

    .blockLargeResponse {
        width: 100%;
    }

    .blockStep1, .blockStep2, .blockStep3, .blockStep4 {
        flex: 0 0 100%;
    }

    .blockStep1 {
        order: 1;
    }

    .blockStep2 {
        order: 3;
    }

    .blockStep3 {
        order: 4;
    }

    .blockStep4 {
        order: 2;
    }
}

@media only screen and (min-width: 601px) {
    .blockLargeElement1 {
        flex: 0 0 calc(50% - 10px);
        margin: 5px 0 0 5px;
        order: 1;
    }

    .blockLargeElement2 {
        flex: 0 0 calc(50% - 10px);
        margin: 0 0 5px 5px;
        order: 3;
    }

    .blockLargeElement3 {
        flex: 0 0 50%;
        order: 2;
    }

    .blockLargeElement4 {
        flex: 0 0 calc(50% - 5px);
        margin: 0 5px 5px 0;
        order: 4;
    }

    .blockSmallElementColor, .blockSmallElementImage {
        flex: 0 0 calc(50% - 5px);
    }

    .blockSmallResponse {
        width: calc(25% - 30px / 4);
    }

    .blockLargeResponse {
        width: calc(50% - 5px);
    }

    .blockStep1, .blockStep2, .blockStep3, .blockStep4 {
        flex: 0 0 calc(50% - 5px);
    }

    .blockStep1 {
        order: 1;
    }

    .blockStep2 {
        order: 2;
    }

    .blockStep3 {
        order: 3;
    }

    .blockStep4 {
        order: 4;
    }
}

@media only screen and (min-width: 1001px) {
    .blockSmallElementColor, .blockSmallElementImage {
        flex: 0 0 calc(100% / 3 - 20px / 3);
    }

    .blockSmallResponse {
        width: calc(20% - 8px);
    }
}