.root {
    margin-bottom: 4rem;
}

.heading {
    text-align: center;
    font-family: var(--HelveticaNeueCyr);
    font-size: 2rem;
    margin-bottom: 2rem;
}

.innerContainer {
    position: relative;
    overflow: hidden;
    margin: 0 -3rem;
}

.mask {
    z-index: 10;
    position: absolute;
    inset: 0;
    background: var(--black);
    opacity: 0.4;
}

.block1, .block2 {
    display: flex;
    height: 12rem;
}

.block1 {
    margin-bottom: -4.8rem;
}

.textBlock {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--white);
    z-index: 11;
    width: 70%;
    position: absolute;
    top: 0;
    height: 80%;
    justify-content: center;
}

.textBlockBottom {
    top: unset;
    bottom: 0;
}

.number {
    font-family: var(--HelveticaNeueCyr);
    font-size: 6.4rem;
    position: relative;
}

.image {
    object-fit: cover;
    position: absolute;
    height: 100%;
    width: auto;
    inset: 0;
}

.image1Block, .image2Block, .image3Block, .image4Block, .image5Block, .image6Block {
    position: relative;
    display: flex;
    justify-content: center;
}

.image1Block {
    clip-path: polygon(0 0, 100% 0, 100% 80%, 40% 80%, 30% 100%, 20% 80%, 0 80%);
    flex: 1 1 30%;
    z-index: 6;
}

.image2Block {
    clip-path: polygon(0 0, 90% 0, 90% 40%, 100% 50%, 90% 60%, 90% 80%, 0 80%);
    z-index: 3;
    flex: 1 1 36%;
    margin-right: -4%;
}

.image3Block {
    clip-path: polygon(0 0, 100% 0, 100% 80%, 60% 80%, 50% 100%, 40% 80%, 0 80%);
    flex: 1 1 34%;
    z-index: 2;
}

.image4Block {
    clip-path: polygon(0 20%, 90% 20%, 90% 40%, 100% 50%, 90% 60%, 90% 100%, 0 100%);
    flex: 1 1 35%;
    margin-right: -4%;
    z-index: 5;
}

.image5Block {
    clip-path: polygon(0 20%, 40% 20%, 50% 0, 60% 20%, 100% 20%, 100% 20%, 100% 100%, 0 100%);
    flex: 1 1 32%;
    z-index: 4;
}

.image6Block {
    clip-path: polygon(0 20%, 100% 20%, 100% 100%, 0% 100%);
    flex: 1 1 33%;
}

@media screen and (min-width: 480px) {
    .block1, .block2 {
        height: 14rem;
    }

    .block1 {
        margin-bottom: -5.6rem;
    }
}

@media screen and (min-width: 641px) {
    .innerContainer {
        margin: 0 -6rem;
    }

    .number {
        font-size: 8.4rem;
    }

    .block1, .block2 {
        height: 18rem;
    }

    .block1 {
        margin-bottom: -7.2rem;
    }

    .textBlock {
        width: 85%;
        gap: 1rem;
    }
}

@media screen and (min-width: 992px) {
    .innerContainer {
        margin: 0;
    }
}