.projects {
    background-image: linear-gradient(var(--color-off-white), var(--color-lighter));
}

.projects h2 {
    color: var(--color-darker);
    padding-bottom: var(--spacing-lg);
}

.project-wrapper {
    display: flex;
    flex-direction: column-reverse;
    gap: var(--spacing-lg);
}

.project-wrapper>* {
    width: 100%;
}

.project-text {
    overflow: hidden;
}

.project-heading {
    color: var(--color-light);
}

.project-subheading {
    color: var(--color-dark);
}

.project-features {
    margin-top: var(--spacing-md);
}

.project-features li {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 12px 0;
}

.project-features li img {
    width: 24px;
    height: 24px;
}

.project-cta {
    margin-top: var(--spacing-md);
}

.project-img img {
    width: 100%;
    object-fit: cover;
    border-radius: var(--spacing-md);
    border: solid 2px var(--color-darker);
}

@media screen and (min-width: 1200px) {

    .project-wrapper {
        flex-direction: row;
        align-items: center;
    }

}