.services__container {
    display: flex;
}

.services__item {
    display: inline-flex;
    height: 200px;
    width: calc(100% / 3);
}

.ast-single-post .entry-content .services__item a,
.editor-styles-wrapper .is-root-container .services__item a {
    text-decoration: none;
    color: inherit;
}

.services__image {
    flex: 1;
    max-height: 200px;
    background-color: var(--color-grey-25);
}

.services__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.services__content__wrapper {
    flex: 1;
}

.services__content {
    padding: 25px;
}

.services__title {
    display: block;
    font-style: normal;
    font-weight: 700;
    font-size: 25px;
    line-height: 130%;
    margin-bottom: 30px;
}

.services__button a {
    margin-top: 20px;
    text-decoration: none;
}

.services__button a span[class^="icon"] {
    font-size: 50px;
}

.ast-single-post .entry-content .services__button a {
    text-decoration: none;
}

@media only screen and (min-width: 1201px) {
    .services__container {
        flex-flow: row wrap;
    }

    /* Sets the last 3 elements out of 6 and gets repeated */
    .services__container :nth-child(6n + 4),
    .services__container :nth-child(6n + 5),
    .services__container :nth-child(6n + 6) {
        flex-flow: row-reverse wrap;
    }
}

@media only screen and (max-width: 1400px) {
    .services__title {
        font-size: 20px;
    }
}

@media only screen and (max-width: 1200px) {
    .services__container {
        flex-flow: column nowrap;
    }
    .services__item {
        display: flex;
        width: 100%;
        height: 170px;
    }

    .services__container :nth-child(even) {
        flex-direction: row-reverse;
    }

    .services__title {
        font-size: 17px;
        line-height: 110%;
        letter-spacing: 0.05em;
        margin-bottom: 25px;
    }

    .services__button a span[class^="icon"] {
        font-size: 44px;
    }
}

@media only screen and (max-width: 768px) {
    .services__item {
        height: 138px;
    }
}