/* ------------------------------------*\
    #STEPS
\*------------------------------------ */
/**
 * [1] Manage small screen behaviour for 3 steps.
 * [2] Manage small screen behaviour for 4 steps.
 * [3] At breakpoint, let the items collapse into single column layout.
 * [4] Assign a (optical) spacing bottom for the text to the link, so a margin
 *     is only created, if there is a link present.
 * [5] Optically align the steps icons with the connector icons.
 */
.c-steps {
    display: flex;
    justify-content: space-between;
}
.c-steps:not(.c-steps--4) { /* [1] */ }
@media (max-width: 720px) {
    .c-steps:not(.c-steps--4) {
        flex-wrap: wrap; /* [3] */
    }
}
.c-steps.c-steps--4 { /* [2] */ }
@media (max-width: 960px) {
    .c-steps.c-steps--4 {
        flex-wrap: wrap; /* [3] */
    }
}

.c-steps__item {
    display: flex;
    flex-direction: column;
    flex-grow: 0;
    flex-shrink: 1;
    flex-basis: 33.3333333333%;
    text-align: center;
}
.c-steps:not(.c-steps--4) .c-steps__item { /* [1] */ }
@media (max-width: 720px) {
    .c-steps:not(.c-steps--4) .c-steps__item {
        flex-direction: row;
        flex-shrink: 0;
        flex-basis: 100%;
        text-align: left;
    }
}
.c-steps.c-steps--4 .c-steps__item { /* [2] */ }
@media (max-width: 960px) {
    .c-steps.c-steps--4 .c-steps__item {
        flex-direction: row;
        flex-shrink: 0;
        flex-basis: 100%;
        text-align: left;
    }
}
.c-steps__item .c-link,
.c-steps__item .c-btn {
    margin-top: 14px; /* [4] */
}

.c-steps__icon {
    margin-bottom: 14px;
}
.c-steps:not(.c-steps--4) .c-steps__icon { /* [1] */ }
@media (max-width: 720px) {
    .c-steps:not(.c-steps--4) .c-steps__icon {
        margin-right: 14px;
    }
}
.c-steps.c-steps--4 .c-steps__icon { /* [2] */ }
@media (max-width: 960px) {
    .c-steps.c-steps--4 .c-steps__icon {
        margin-right: 14px;
    }
}
.c-steps__icon .c-icon {
    font-size: 3rem;
    line-height: 1;
    color: #004666;
}

.c-steps__title {
    margin-bottom: 0;
    font-weight: 700;
    color: #004666;
}

.c-steps__text {
    margin-bottom: 0;
}

.c-steps__connector {
    font-size: 2rem;
    line-height: 1.5555555556;
    flex-grow: 0;
    flex-shrink: 0;
    flex-basis: 36px;
    margin-right: 28px;
    margin-left: 28px;
    color: #004666;
}
.c-steps:not(.c-steps--4) .c-steps__connector { /* [1] */ }
@media (max-width: 720px) {
    .c-steps:not(.c-steps--4) .c-steps__connector {
        margin-top: 28px;
        margin-right: 0;
        margin-bottom: 28px;
        margin-left: 0;
        padding-left: 9px; /* [5] */
    }
}
.c-steps.c-steps--4 .c-steps__connector { /* [2] */ }
@media (max-width: 960px) {
    .c-steps.c-steps--4 .c-steps__connector {
        margin-top: 28px;
        margin-right: 0;
        margin-bottom: 28px;
        margin-left: 0;
        padding-left: 9px; /* [5] */
    }
}