@import '/core/css/import.less';

.keyAreasHeaderImage {
    margin: 0 0 40px;

    @media @mobile {
        margin: 0 0 20px;
    }
}

.keyAreasWrap {
    float: right;
    width: ~'calc(50% - 10px)';


    @media @mobile {
        width: 100%;
        margin: 20px 0;
    }
}

.keyAreaContent {
    float: left;
    width: ~'calc(50% - 20px)';
    margin: 0 20px 20px 0;

    @media @mobile {
        width: 100%;
    }
}

.keyAreaBox {
    float: left;
    width: ~'calc(50% - 10px)';
    margin: 0 20px 20px 0;
    border: 1px solid var(--border_color);

    @media @mobile {
        width: 100%;
    }

    h2 {
        margin: 0;

        a {
            width: 100%;
            display: inline-block;
            padding: 25px;
        }
    }

    &:nth-of-type(even) {
        margin: 0 0 16px;
    }

    &:nth-of-type(odd) {
        clear: left;
    }
}

.otherKeyAreasWrap {
    clear: both;

    h2 {
        margin: 0 0 20px;
    }

    ul {

        li {
            float: left;
            width: ~"calc(50% - 20px)";
            margin: 0 20px 0 0;

            @media @mobile {
                width: 100%;
            }

            &:nth-of-type(even) {
                margin: 0;
            }
        }
    }
}