#wrapper{
    min-height: 66vh;
}

section#services-list {
    margin: var(--gutter) 0;
    padding: 0 var(--margin);
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--margin);

}

section#services-list article {
    flex-basis: calc((100% - 3* var(--margin))/4);
    min-width: 350px;
    /* aspect-ratio: 2/3; */
    background: var(--color-black);
    border-radius: 20px;

    box-shadow: 0px 0px 20px 0px rgba(13, 27, 42, 0.25);
}

section#services-list article .card-figure {
    width: 100%;
    height: 300px;

    border-top-left-radius: 20px;
    border-top-right-radius: 20px;

    overflow: hidden;
}

section#services-list article .card-figure img {
    width: 100%;
    height: 100%;
    object-fit: cover;

    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
}

section#services-list article .card-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--margin);
    padding: var(--margin) var(--margin) var(--gutter) var(--margin);
    text-align: center;
    height: 400px;
    color: var(--color-white);
    position: relative;
}

section#services-list article .card-body .button {
    background: var(--color-primary);
    color: var(--color-black);
    box-shadow: 0px 0px 20px 0px rgba(13, 27, 42, 0.25);
    transition: all .3s ease-in;

}

section#services-list article .card-body .button:hover {
    background: var(--color-secondary);
    color: var(--color-white);
    box-shadow: 0px 7px 10px -3px rgb(173, 255, 47, .3);
}

.service-count{
    position: absolute;
    width: 100%;
    text-align-last: left;
    padding: 0 var(--margin);
    left: 0;
    bottom: calc(var(--margin)/2);

    color: var(--color-secondary);
    
}

@media screen and (max-width: 1120px) {
    section#services-list article{
        flex-basis: calc(50% - var(--margin));
    }
}

@media screen and (max-width: 760px) {
    section#services-list article{
        flex-basis: 100%;
        min-width: 100px;
        /* aspect-ratio: 3/4; */
    }
}