.services {
    background-color: var(--color-secondary-dark);
    color: var(--color-primary-light);

    display: flex;
    gap: var(--spacing-jumbo);
    flex-direction: column;
    align-items: flex-start;
}

.services-heading {
    font-size: 3rem;
    line-height: 3.8rem;
    color: var(--color-highlight);
}


.services-list {
    margin-top: var(--spacing-lg);
}

.services-card {
    border-left: solid 4px white;
    padding: var(--spacing-sm) var(--spacing-md);
    margin-top: var(--spacing-lg);
}


.services-card:first-child {
    margin-top: 0;
}

.services-card>img {
    width: 60px;
    height: 60px;
}

.services-summary {
    margin-top: var(--spacing-md);
}

.services-cta {
    margin-top: var(--spacing-lg);
}

.services-cta:hover {
    background-color: var(--color-highlight);
}

.services-images {
    width: 100%;
}

.services-images img {
    box-shadow: var(--shadow-box);
    border-radius: 8px;
}

.image-long {
    aspect-ratio: 1.5 / 1;
    width: 100%;
}

.image-square {
    aspect-ratio: 1 / 1;
    width: 100%;
    margin-top: var(--spacing-lg);
}


@media screen and (width > 720px) {

    .image-long {
        width: calc(100% - 100px);
        aspect-ratio: 1.5 / 1;
        margin-left: auto;
    }

    .image-square {
        width: calc(100% - 200px);
        position: relative;
        top: -100px;
        margin-top: 0;
    }

}

@media screen and (width > 1400px) {

    .services {
        flex-direction: row;
    }

    .services>* {
        width: 50%;
    }

}