/**
 * Herbalist
 * Herbalist – is a website template created for selling the cannabis, medical marijuana and CBD products, cannabis blogging and others
 * Exclusively on https://1.envato.market/herbalist-html
 *
 * @encoding        UTF-8
 * @version         1.0.0
 * @copyright       (C) 2018 - 2021 Merkulove ( https://merkulov.design/ ). All rights reserved.
 * @license         Envato License https://1.envato.market/KYbje
 * @contributors    Lamber Lilit (winter.rituel@gmail.com)
 * @support         help@merkulov.design
 **/
// about section

.about {
    &_main {
        &-content {
            &_header {
                margin-bottom: 15px;
            }
        }

        &-media {
            border-radius: 16px;
            overflow: hidden;
            margin: 30px 0;
        }
    }

    &_numbers {
        &-group {
            max-width: 320px;
            margin: 0 auto 20px;

            &:last-of-type {
                margin-bottom: 0;
            }

            .number {
                font-family: $accentFont;
                font-weight: 900;
                font-size: 36px;
                height: 36px;
                margin-bottom: 20px;

                &-label {
                    font-weight: 600;
                    font-size: 14px;
                    text-align: center;
                }
            }
        }
    }
}

// media queries

@media screen and (min-width: 575.98px) {
    .about {
        &_numbers {
            margin: 0 -20px;

            &-group {
                max-width: unset;
                padding: 0 20px;

                &[data-order="3"] {
                    margin-bottom: 0;
                }

                .number {

                    &-label {
                        text-align: left;
                    }
                }
            }
        }
    }
}

@media screen and (min-width: 767.98px) {
    .about {
        &_numbers {

            &-group {
                .number {
                    font-size: 40px;
                    height: 40px;
                }
            }
        }
    }
}

@media screen and (min-width: 991.98px) {
    .about {
        &_main {
            margin-bottom: 60px;
            &-media {
                margin: 0 0 0 40px;
                img {
                    height: 100%;
                }
            }
        }
        &_numbers {

            &-group {
                margin-bottom: 0;
            }
        }
    }
}

@media screen and (min-width: 1199.98px) {
    .about {
        &_main {
            &-media {
                margin: 0;
            }
            &-media, &-content {
                width: calc(50% - 30px);
            }
        }
        &_numbers {

            &-group {
                .number {
                    font-size: 70px;
                    height: 58px;
                }
            }
        }
    }
}