
.feature-circles {
    padding-bottom: 0;
}

//
// Feature circle component
//
.feature-circle {
    &:extend(.text-center);
}

.feature-circle__image {
    width: 50%;
    max-width: 200px;
    margin: auto;
    display: block;
}

.feature-circle__title {
    font-size: @font-size-h3;
}

.feature-circle__description {}


//
// Surround circle component
//
.surround-circle {
    &:extend(.text-center);

    .feature-circle__title {

    }

    .feature-circle__description {
        &:extend(.small);
    }

    .circle {
        text-align: center;
        position: relative;
        border-radius: 100%;
        background-clip: padding-box;
        &:after {
            display: block;
            padding-bottom: 100%;
            width: 100%;
            height: 0;
            border-radius: 50%;
            background-color: white;
            content: "";
            border: 2px solid transparent;
        }
        &:before {
            content: '';
            position:absolute;
            z-index:-1;
            left:-2px;right:-2px;
            top:-2px;bottom:-2px;
            border-radius: 50%;
            background: linear-gradient(@blueBright,@pink);
        }
    }
    .container {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }
    .wrapper {
        display: table;
        width: 100%;
        height: 100%;
    }
    .inner {
        display: table-cell;
        padding: 1em;
        vertical-align: middle;
    }
}
