.features-row {
    display: flex;
    justify-content: center;
    align-items: flex-start;
}

.feature {
    //color: $primary;
    margin-bottom: map-get($spacers, 5);

    &__header {
        display: flex;
        align-items: center;
        margin-bottom: map-get($spacers, 3);
    }

    &__icon {
        font-size: 2.4em;
        color: $primary;

        margin: {
            bottom: 0;
        }
        i {
            margin: {
                left: map-get($spacers, 3);
                right: map-get($spacers, 4);
            }
        }
    }

    &__title {
        margin-bottom: 0 !important;
    }
    &__content {
        margin-bottom: 0;
        color: $dark;
    }

    &--center {
        text-align: center;
    }

    &--center &__header {
        flex-direction: column;
    }

    &--center &__icon {
        //color: $dark;
        font-size: 2.8rem;
        position: relative;

        &::before {
            left: 0;
            top: -10px;
            content: ' ';
            width: 2.2rem;
            height: 2.2rem;
            display: block;
            position: absolute;
            border-radius: 50%;
            transform: translateX(-50%);
            background-color: rgba($secondary, .3);
        }
    }
}

@include media-breakpoint-up(md) {
    .feature {
        height: 100%;
        display: flex;
        flex-direction: column;

        &__content {
            flex: 1;
        }
    }
}

.feature-row {
    display: flex;
    margin-bottom: map-get($spacers, 3);

    &__md {
        @include media-breakpoint-up(lg) {
            padding: {
                left: 6rem;
                right: 6rem;
            };
        }
    }

    &__sm {
        @include media-breakpoint-only(md) {
            padding: {
                left: 6rem;
                right: 6rem;
            };
        }
        @include media-breakpoint-only(lg) {
            padding: {
                left: 14rem;
                right: 14rem;
            };
        }
        @include media-breakpoint-up(xl) {
            padding: {
                left: 18rem;
                right: 18rem;
            };
        }
    }

    &__connect {
        .feature-row:not(:last-child) {
            .feature-row__icon {
                &::before {
                    content: '';
                    display: block;
                    position: absolute;
                    width: 5px;
                    height: 100%;
                    background-color: $primary;
                    margin: auto;
                    left: 0;
                    right: 0;
                    top: 50%;
                    z-index: -1;
                }
            }
        }
        .feature-row__icon {
            color: $white;

            i::before {
                padding: 1rem;
                border-radius: 50%;
                background-color: $primary;
                font-size: .65em;
            }
        }
    }

    &__icon {
        margin-right: map-get($spacers, 5);
        font-size: 3.5rem;
        color: $primary;
        position: relative;

        margin: {
            bottom: 0;
        }
    }

    &__content {
        display: flex;
        flex-direction: column;
        align-items: start;
        justify-content: center;
    }

    &__title {
        margin-bottom: $spacer * .75;

        & > span {
            .soon & { vertical-align: middle; }
        }
        &::after {
            .soon & {
                content: 'Wkrótce';
                display: inline-block;
                border: 1px solid $secondary;
                font-size: .45em;
                margin-left: map-get($spacers, 2);
                padding: 0.1rem 0.25rem;
                letter-spacing: .1rem;
                text-transform: uppercase;
                vertical-align: middle;
            }
        }
    }
}


// .feature {
//     padding-bottom: map-get($spacers, 5);

//     &-icon {
//         font-size: 3rem;
//     }

//     .features-home & {
//         padding-bottom: 0;
//     }

//     .features-main &-icon {
//         color: $secondary;
//         font-size: 2.4rem;
//         margin: {
//             left: map-get($spacers, 3);
//             right: map-get($spacers, 4);
//         }
//     }

//     .features-main &-title {
//         margin-bottom: 0;
//     }
// }

// .feature {
//     &-main {
//         align-items: center;
//         margin-bottom: map-get($spacers, 6);

//         padding: {
//             top: map-get($spacers, 5);
//             bottom: map-get($spacers, 5);
//         }
//     }

//     &-main:nth-child(even) &-title {
//         color: $secondary;
//     }

//     &-main &-image {
//         max-width: 50%;

//             img {
//                 width: 100%;
//                 height: auto;
//                 display: block;
//             }

//             &.fluid img {
//                 max-width: 100%;
//             }
//     }
// }

// .feature {
//     &-extra {
//         text-align: center;
//     }

//     &-extra .title {
//         font-size: $h4-font-size;
//     }

//     &-extra .header {
//         display: flex;
//         align-items: center;
//         flex-direction: column;
//     }

//     &-extra &-icon {
//         color: $dark;
//         position: relative;

//         &::before {
//             left: 0;
//             top: -10px;
//             content: ' ';
//             width: 2.2rem;
//             height: 2.2rem;
//             display: block;
//             position: absolute;
//             border-radius: 50%;
//             transform: translateX(-50%);
//             background-color: rgba($secondary, .3);
//         }
//     }
// }


// @include media-breakpoint-up(lg) {
//     .feature {
//         height: 100%;
//         display: flex;
//         flex-direction: column;

//         .content {
//             flex: 1;
//         }


//         &-main {
//             flex-direction: row-reverse;

//             .actions .btn + .btn {
//                 margin-left: map-get($spacers, 3);
//             }
//         }

//         &-main.reverse {
//             flex-direction: row;
//         }

//         &-main.reverse &-image {
//             padding-right: map-get($spacers, 5);
//         }

//         &-main.reverse &-image img {
//             margin-left: 0;
//             margin-right: auto;
//         }

//         &-main .content {
//             flex: 1 1 50%;
//         }
//     }
// }

// @include media-breakpoint-down(lg) {
//     .feature {
//         &-main {
//             .row {
//                 flex-direction: column-reverse;
//             }

//             .actions {
//                 .btn {
//                     width: 100%;
//                 }

//                 .btn:not(:last-child) {
//                     margin-bottom: map-get($spacers, 3);
//                 }
//             }
//         }

//         &-main &-image {
//             width: 100%;
//             max-width: 25rem;

//             margin: {
//                 left: auto;
//                 right: auto;
//                 bottom: map-get($spacers, 5);
//             }
//         }
//     }
// }