.services-component {
    color: rgb(var(--clr-text-light));
    font-family: var(--ff-body);
    display: flex;
    flex-wrap: wrap;
    margin-bottom: var(--section-gap);
}
.services-component h2 {
    font-family: var(--ff-heading);
    font-size: 1.2rem;
}
.services-component-service-container {
    position: relative;
    border: 1px solid white;
    min-width: calc(320px - 2rem);
    width: 100%;
    min-height: 40vh;
    padding: 2rem var(--page-margin);
    background-color: rgb(var(--clr-primary));
    display: flex;
    flex-direction: column;
    justify-content: center;
    transition: all 600ms ease-in-out;
}
.services-component-service-container:hover, 
.services-component-service-container:hover:focus-visible {
    background-color: rgb(var(--clr-secondary));
}
.services-component-service-container:hover .services-component-section-body-wrapper, 
.services-component-service-container:hover:focus-visible .services-component-section-body-wrapper {
    display: block;
}
.services-component-service-content-wrapper > *:not(:last-child) {
    margin-bottom: 1.5rem;
}
.services-component-icon-wrapper {
    padding: 0.8rem;
    background-color: rgb(var(--clr-text-light));
    border-radius: 12px;
    width: fit-content;
    display: flex;
    justify-content: center;
    align-items: center;
}
.services-component-icon-wrapper svg{
    width: 2rem;
    height: 2rem;
    color: rgb(var(--clr-primary));
}
.services-component-section-body-wrapper {
    display: none;
    transition: all 600ms ease-in-out;
}
.services-component-service-container:not(:last-child)::after {
    content: '';
    position: absolute;
    bottom: 0;
    right: 20vw;
    width: 60vw;
    height: 1px;
    background-color: white;
    visibility: hidden;
}

@media only screen and (min-width: 660px) {
    .services-component-service-container {
        flex-basis: 50%;
        /*border: 1px solid white;*/
    }
    .services-component-service-container:not(:last-child)::after {
        content: '';
        visibility: hidden;
    }
}

@media only screen and (min-width: 1280px) {
    .services-component-service {
        flex-direction: row;
    }
    .services-component-service-container {
        min-height: 60vh;
        max-height: 80vh;
        flex-basis: 25%;
        padding: 0 2rem; 
        justify-content: flex-start;
    }
    .services-component-service-container:not(:last-child)::after {
        content: '';
        position: absolute;
        top: 16vh;
        right: 0;
        width: 1px;
        height: 48vh;
        background-color: white;
        /*visibility: visible;*/
    }
    .services-component-service-content-wrapper {
        margin-top: 20vh;
        transition: all 600ms ease-in-out;
    }
    .services-component-service-container:hover .services-component-service-content-wrapper, 
    .services-component-service-container:hover:focus-visible .services-component-service-content-wrapper{
    margin-top: 10vh;
}
}