.services--section {
    overflow: hidden;
}

.services--container {
    padding-top: 60px;
    padding-bottom: 60px;
}

.services--image {
    max-width: 600px;
    margin: 0 auto 45px;
    clip-path: var(--theme-image-clip-path);
    font-size: 100px;
}

.services--item {
    padding-bottom: 80px;
}

.services--copy-wrap {
    max-width: 600px;
    margin: 0 auto;
}

.services--number {
    margin-bottom: 0;
    /* color: var(--theme-sand); */
    color: #f9efe8;
    /* opacity: .5; */
    background-color: #fff;
}

.services--title {
    margin-bottom: 15px;
    color: var(--theme-red);
    text-transform: uppercase;
}

.services--subtitle {
    font-weight: 400;
    font-size: 1.375rem;
    margin-bottom: 15px;
    line-height: 1.3636em;
}

.services--icons {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    margin-top: 30px;
}

.services--icon-image {
    height: 38px;
    width: 70px;
    margin: 0 auto 8px;
}

.services--icon-image svg {
    object-position: center top;
}

.services--icon-description {
    text-align: center;
    line-height: 1.3em;
}



@media (min-width: 1100px) {

    .services--col {
		flex: 1 0 0%;
	}

    .services--copy-col {
        min-width: 600px; /* the word "sustainability is too long */
    }

    .services--item {
        padding-bottom: 40px;
    }
    
    .services--number {
        margin-bottom: 90px;
    }

    .services--image-wrap {
        transition: opacity .5s ease-in-out;
        width: 100%;
        background: #fff;
        opacity: 0;
    }

    /* .services--item:nth-child(1) .services--image-wrap, */
    .services--item.animated .services--image-wrap {
        opacity: 1;
        transition: opacity 1s ease-in-out;
    }

    .services--number {
        opacity: 0;
        position: relative;
    }

    .services--number.animated:after {
        content: "";
        position: absolute;
        top: -80px;
        left: 0;
        right: 0;
        height: 80px;
        background-color: #fff;
    }

    .services--item:nth-child(1) .services--number,
    .services--number.animated {
        opacity: 1;
    }
}