.about {
    display: flex;
    flex-direction: column;
    gap: 30px;
    align-items: center;

    padding: 70px 200px 100px 200px;
    background-color: var(--dark-brown);
}

.about__title-container {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    max-width: 1520px;
    width: 100%;
}

.about__title {
    font-size: 40px;
    font-weight: 600;
    white-space: nowrap;
}

.about-content {
    display: flex;
    flex-direction: column;
    gap: 80px;
    max-width: 1520px;
    width: 100%;
}

.about-content__digits-block {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 50px;
}

.about-content__digit-item {
    display: flex;
    flex-direction: column;
    width: 300px;
    padding-bottom: 40px;
    gap: 30px;
    border-bottom: 1px solid var(--light-text);
}

.about-content__digit-value {
    font-size: 62px;
    font-weight: 600;
    white-space: nowrap;
}

.about__descr {
    display: flex;
    flex-direction: row;
    gap: 100px;
}

.about__descr-img {
    max-width: 370px;
    max-height: 514px;
    width: 100%;
}

.about__descr-text {
    max-width: 900px;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.about__descr-text-item {
    display: flex;
    flex-direction: row;
    gap: 10px;
    align-items: center;
}

.about__cards {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 40px;
}

.about__card {
    position: relative;
}

.about__card-text {
    position: absolute;

    font-size: 24px;
    font-weight: 600;

    bottom: 42px;
}

@media(max-width: 1380px) {
    .about__cards {
        justify-content: center;
    }

    .about-content__digits-block {
        justify-content: center;
    }

    .about__descr {
        gap: 50px;
    }
}

@media(max-width: 1250px) {
    .about__descr {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 30px;
    }
}

@media(max-width: 810px) {
    .about {
        padding: 50px 100px 70px 100px;
    }

    .about__descr {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 30px;
    }

    .about__cards {
        justify-content: center;
    }

    .about-content__digits-block {
        justify-content: center;
    }
}

@media(max-width: 428px) {
    .about {
        padding: 50px;
    }
}