.features {
    padding-top: 40px;
    padding-bottom: 40px;
    background-image: url('../../../img/layout/dot-pattern.png');

    @media (min-width:768px) {
        padding-top: 80px;
        padding-bottom: 80px;
    }
}

.features-list {
    margin: -14px;
}

.features-list__item {
    display: inline-block;
    vertical-align: top;
    width: 100%;
    margin-right: -4px;
    padding: 14px;

    @media (min-width:480px) {
        width: 50%;
    }
}

@media (min-width:768px) {
    .features--all .features-list__item {
        width: 33.333333%;
    }

    .features--other .features-list__item {
        width: 50%;
    }
}

@media (min-width:992px) {
    .features--other .features-list__item {
        width: 25%;
    }
}

@media (min-width:1200px) {
    .features--all .features-list__item {
        width: 20%;
    }
}

.feature__icn {
    display: block;
    margin-bottom: 10px;

    svg {
        width: 50px;
        height: 50px;

        path,
        circle {
            stroke: var(--brand-primary);
        }
    }
}

.feature__title {
    margin-top: 0;
    margin-bottom: 15px;
    font-size: 21px;
    color: var(--text-color);

    a {
        display: inline-block;
        color: inherit;
        transition: color .2s ease-in-out;

        &:hover,
        &:focus {
            text-decoration: none;
            color: var(--brand-primary);
        }
    }
}

.feature__desc {
    margin-bottom: 10px;
    font-size: 16px;
    font-weight: 300;
    line-height: 1.2;
    color: var(--brand-grey-light);
}

.feature__more {
    display: inline-block;

    svg {
        width: 20px;
        height: 20px;
    }

}