///////////////////////////////////////////////////////////////
// Device: Desktop
///////////////////////////////////////////////////////////////

.mea6 {
    display: block;
    margin-top: 20px;
}

.mea6-container {
    @include outer-container;
}

.mea6-content {
    overflow: hidden;
    background: $color-grey-darker;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.mea6-item {
    display: block;
    flex-basis: 0;
    flex-grow: 1;
    padding: 20px 0;
    position: relative;

    &:not(:first-child) {
        margin: 0 0 0 20px;

        &::before {
            background: $color-grey-light;
            content: "";
            display: block;
            height: 40px;
            position: absolute;
            left: -10px;
            top: 50%;
            transform: translateY(-50%);
            width: 1px;
        }
    }
}

.mea6-item-title {
    color: #FFFFFF;
    font-family: lucien-light, sans-serif;
    font-size: 0.8rem;
    font-weight: normal;
    margin-bottom: 6px;
    text-align: center;
}

.mea6-item-description {
    color: $color-grey-light;
    font-family: lucien-regular, sans-serif;
    font-size: 1rem;
    text-align: center;

    strong {
        color: $color-golden;
        font-weight: normal;
    }
}

///////////////////////////////////////////////////////////////
// Device: Tablet
///////////////////////////////////////////////////////////////

@include tablet-landscape-and-below {

    .mea6-content {
        width: 100%;
        display: block;
    }

    .mea6-item {
        width: 100%;

        &:not(:first-child) {
            margin-left: 0;

            &::before {
                display: none;
            }
        }
    }
}