section.about {
    text-align: center;
    margin-bottom: 5rem;
}

section.about .about-logo {
    margin-bottom: 56px;
}

section.about .about-text {
    font-size: 2.3em;
    padding: 0 23%;
    font-weight: 500;
}

section.mission {
    text-align: center;
    margin-bottom: 5rem;
}

section.mission .mission-general {
    /*font-size: 2.1vw;*/
    /*font-weight: 700;*/
    padding: 0 23%;
    font-size: var(--ui-h1);
    margin-bottom: 45px;
}

section.mission .mission-list{
    display: flex;
    flex-wrap: wrap;
}

section.mission .mission-list-item {
    min-width: 265px;
    margin-bottom: 20px;
    flex: 1 1 265px;
}

section.mission .mission-list-item .short-description {
    font-size: var(--ui-h4);
    line-height: 1;
    font-weight: 500;
    margin: 35px 0 22px 0;
}

section.mission .mission-list-item .full-description {
    /*font-size: var(--ui-text-large);*/
    font-size: var(--ui-text-base);
    line-height: 1.3125;
    font-weight: 400;
    padding: 0 50px;
}

section.brands {
    padding: 0 0 5rem 0;
    position: relative;
    z-index: 3;
    background-color: #fff;
}

section.brands .main-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    height: 900px;
    gap: 40px;
}

section.brands .subgrid {
    display: grid;
    grid-template-areas:
                    "logo-link text"
                    "back back";
    grid-template-columns: 1fr 1fr;
}

section.brands .subgrid-wrapper {
    padding: 50px 3.3vw;
    background-position: bottom;
    background-repeat: no-repeat;
    background-size: cover;
    /*border-radius: 0.75rem;*/
    border-radius: 4px;
}

section.brands .subgrid-wrapper.metta {
    background-image: url(/local/templates/v2/images/brands_metta.jpg);
}

section.brands .subgrid-wrapper.ergolife {
    background-image: url(/local/templates/v2/images/brands_ergolife.jpg);
}

section.brands .subgrid.metta-block .logo{
    margin-bottom: 38px;
    height: 92px;
}

section.brands .subgrid.ergolife-block .logo{
    margin-bottom: 44px;
    height: 75px;
}

section.brands .subgrid .text_block .text {
    margin: -4px;
    font-size: var(--ui-text-large);
}

section.brands .subgrid.metta-block .text_block {
    color: #fff;
    padding-right: 69px;
}

section.brands .subgrid.ergolife-block .text_block {
    color: #fff;
    padding-right: 35px;
}

section.brands .subgrid.ergolife-block .logo_with_link_block {
    margin-top: 10px;
}

section.brands .subgrid .logo_with_link_block a:hover img.hover {
    display: block;
}

section.brands .subgrid .logo_with_link_block a:hover img.not-hover,
section.brands .subgrid .logo_with_link_block a img.hover {
    display: none;
}

section.brands .subgrid .logo_with_link_block .link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 25px 0;
    font-weight: normal;
}

section.brands .subgrid  .logo_with_link_block .link {
    color: #fff;
}

@media only screen and (max-width:1024px) {
    section.about {
        margin-bottom: 4rem;
    }
}

@media screen and (max-width: 768px) {
    section.about {
        margin-bottom: 2.63rem;
    }

    section.about .about-logo {
        width: 250px;
        margin-bottom: 29px;
    }

    section.about .about-text {
        font-size: 4.7vw;
        padding: 0 4%;
    }

    section.mission {
        margin-bottom: 46px;
    }

    section.mission .mission-general {
        font-size: 6vw;
        padding: 0 9%;
        margin-bottom: 26px;
    }

    section.mission .mission-list-item .short-description {
        /*font-weight: 700;*/
    }

    section.mission .mission-list-item .full-description {
        /*font-size: 3.5vw;*/
        padding: 0 11%;
        line-height: normal;
    }

    section.brands {
        margin-bottom: 45px;
    }

    section.brands .main-grid {
        display: flex;
        flex-direction: column;
        gap: 25px;
        height: auto;
    }

    section.brands .subgrid {
        grid-template-columns: none;
    }

    section.brands .subgrid-wrapper {
        height: 305px;
        padding: 30px 20px;
    }

    section.brands .subgrid .text_block {
        padding: 0;
    }

    section.brands .subgrid .text_block .text {
        font-size: 3.5vw;
    }

    section.brands .subgrid.ergolife-block .logo,
    section.brands .subgrid.metta-block .logo {
        margin-bottom: 16px;
    }

    section.brands .subgrid.metta-block .logo {
        height: 45px;
    }

    section.brands .subgrid.ergolife-block .logo {
        height: 38px;
    }

    section.brands .subgrid.ergolife-block .logo_with_link_block  {
        margin-top: 0;
    }

    section.brands .subgrid-wrapper {
        position: relative;
    }

    section.brands .subgrid .logo_with_link_block .link {
        font-size: 0;
        gap: 0;
        padding: 0;
        position: absolute;
        bottom: 20px;
        left: 13px;
    }

    section.brands .subgrid.metta-block .text_block {
        padding-right: 152px;
    }

    section.brands .subgrid.ergolife-block .text_block {
        padding-right: 113px;
    }
}