.services {
    margin: 25vh 0;
    width: 100vw;
}

.services > .title {
    justify-self: center;
    align-self: center;
    font-size: var(--font-size-xlarge);
    font-family: var(--font-family-global), serif;
    color: var(--text-color-body);
    text-align: center;
    margin-bottom: 12.5vh;
}

.services .wrapper {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(50px, 350px));
    grid-gap: 50px;
    /*grid-template-rows: auto 1fr auto;*/
    justify-items: center;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: 50px;
}

.services .more {
    margin: 50px;
    /*padding: 0;*/
    /*height: -webkit-fill-available;*/
    display: grid;
    align-content: center;
}

.services .more a {
    color: rgba(var(--text-color-body-rgb), .5);
    transition-duration: .5s;
    align-self: center;
    justify-self: center;
    font-family: var(--font-family-global), serif;
    font-size: var(--font-size-large);
}

.services .more a:hover {
    color: var(--text-color-body);
    transition-duration: .5s;
}

.services .more a i {
    display: inline-block;
    transition-duration: .5s;
}

.services .more a:hover i {
    transform: translateX(1rem);
    transition-duration: .5s;
}

.services .wrapper .card {
    background-color: rgba(var(--body-color-darker-rgb), .25);
    box-shadow: var(--box-shadow-global);
    /*height: -webkit-fill-available;*/
    border-radius: 1rem;
    /*margin: 50px;*/
    padding: 2rem;
    cursor: pointer;
    transition-duration: .5s;
    display: flex;
    min-width: 200px;
    height: 100%;
    width: 100%;
    will-change: transform;
}

.services .wrapper .card:hover {
    transform: scale(1.1);
    border: 1px solid var(--body-color-light);
    transition-duration: 0.5s;
}

.services .wrapper .card img {
    height: 96px;
    width: 96px;
}

.services .wrapper .card i {
    font-size: 50px;
    color: var(--text-color-body);
    margin: 1rem;
}

.services .wrapper .card .title {
    font-family: var(--font-family-global), serif;
    text-shadow: var(--box-shadow-global);
    color: var(--text-color-body);
    padding: .5rem;
    border-radius: 1rem;
    border: 2px solid var(--text-color-body);
    /*width: max-content;*/
    align-self: center;
    text-align: center;
    margin: 1rem;
}

.services .wrapper .card .subtitle {
    font-family: var(--font-family-global), serif;
    text-shadow: var(--box-shadow-global);
    color: rgba(var(--text-color-body-rgb), .5);
    margin: 1rem;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}