// ----------------------------------
//   Feature section
// ----------------------------------

.feature-section {
    @extend .section;

    > div + div {
        margin-top: 2em;
    }

    .steps {
		display: flex;
		justify-content: center;
		column-gap: 2rem;

        .steps-img {
            width: 270px;
            height: 220px;
        }

        .steps-step1 .steps-img {
            background-image: url(#{$image-path}/step1.png);
        }
        .steps-step2 .steps-img {
            background-image: url(#{$image-path}/step2.png);
        }
        .steps-step3 .steps-img  {
            background-image: url(#{$image-path}/step3.png);
        }

        .steps-step1,
        .steps-step2,
        .steps-step3 {
			display: flex;
			flex-flow: column;
			align-items: center;
            @extend .text-center;
        }
    }

    .call-to-action {
        @extend .text-center;
    }
}