section.services-blocks {
    background-color: $c-navy;
    padding: 4rem 0;

    h2 {
        @extend .goudy;
        @extend .headline-lg;
        color: $c-white;
    }

    .blocks {
        display: flex;
        flex-direction: column;
        gap: 1.5rem;

        @include media-breakpoint-up(lg) {
            flex-direction: row;
            flex-wrap: wrap;
        }
    }

    .block {
        position: relative;
        padding: 2rem 1.5rem;
        background-color: $c-lightNavy;
        color: $c-white;

        svg {
            margin-bottom: 1rem;
        }

        h3 {
            font-weight: bold;
        }

        &:nth-of-type(even) {
            background-color: $c-offWhite;
            color: $c-textGrey;

            h3 {
                color: $c-navy;
            }

            svg {
                filter: brightness(0) saturate(100%) invert(21%) sepia(57%) saturate(688%) hue-rotate(162deg) brightness(92%) contrast(88%);
            }
        }

        &:first-of-type {
            background-color: $c-tan;

            @include media-breakpoint-up(lg) {
                flex: 1 1 30%;
                min-height: 100%;
            }
        }

        @include media-breakpoint-up(lg) {
            flex: 1 1 calc(35% - 0.75rem);
        }
    }

    .large-arrow {
        position: absolute;
        right: 1.5rem;
        bottom: 1.5rem;
        opacity: 0.25;
        width: 40%;
        height: auto;

        svg {
            width: 100%;
            height: auto;
            position: absolute;
            bottom: 0;
            right: 0;
            margin: 0;
        }

        @include media-breakpoint-down(lg) {
            display: none;
        }
    }
}