.services {
    /* display: flex; */
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    /* flex-wrap: wrap; */
    gap: 8px;
}

.service-btn {
    display: flex;
    align-items: center;
    text-decoration: none;
    /* color: #eee; */
    color: var(--color);
    min-width: 170px;
    font-weight: bold;
    gap: 8px;
    background-color: color-mix(in srgb, var(--color) 25%, transparent);
    border: 1px solid var(--color);
    padding: 8px;
    border-radius: 5px;
    transition: background-color .2s, scale .2s;
}

.service-btn img {
    width: 35px;
    aspect-ratio: 1;
}

.service-btn:hover {
    /* -webkit-box-shadow:0px 0px 30px 15px rgba(255,255,255,0.33);
    -moz-box-shadow: 0px 0px 30px 15px rgba(255,255,255,0.33); */
    /* box-shadow: 0px 0px 30px 10px color-mix(in srgb, var(--color) 25%, transparent); */
    background-color: color-mix(in srgb, var(--color) 35%, transparent);
}

.service-btn:active {
    scale: .85;
}

.service-btn[disabled] {
    cursor: not-allowed;
}

@media (max-width: 768px) {
    .services {
        grid-template-columns: repeat(2, 1fr);
    }
}