.services {
    margin-top: -70px;
    position: relative;
    z-index: 3;

    @media(max-width: 768px) {
        height: auto;
        margin-top: 0px;
    }

    .services-content {
        background-color: rgba(var(--color-dark-dark-rgb), 0.2);
        backdrop-filter: blur(12px);
        height: 100%;
        padding: var(--space-m);
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: var(--space-xl);
        position: relative;

        &:after {
            content: "";
            position: absolute;
            inset: -5px;
            padding: 2px;
            background: linear-gradient(45deg,
                    rgba(var(--color-primary-rgb), 0.5) 0%,
                    rgba(var(--color-primary-rgb), 0.5) 40%,
                    rgba(var(--color-primary-light-rgb), 0.9) 47%,
                    rgba(255, 255, 255, 0.7) 50%,
                    rgba(var(--color-primary-light-rgb), 0.9) 53%,
                    rgba(var(--color-primary-rgb), 0.5) 60%,
                    rgba(var(--color-primary-rgb), 0.5) 100%);
            background-size: 300% 300%;
            background-position: 0% 100%;
            -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
            -webkit-mask-composite: xor;
            mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
            mask-composite: exclude;
            pointer-events: none;
            z-index: 0;
            animation: borderGlowSweepRepeat 5s cubic-bezier(0.2, 0, 0.2, 1) infinite;
            transition: filter 0.3s ease;
        }

        @media(max-width: 768px) {
            grid-template-columns: 1fr;
            gap: var(--space-3xl);
            padding: 0px;
            background: none;
            border-bottom: 2px solid var(--color-primary);

            &:after {
                display: none;
            }
        }

        .service-item {
            display: grid;
            grid-template-columns: 1fr 1fr;
            align-items: flex-end;
            gap: var(--space-l);
            position: relative;
            z-index: 1;

            &:hover {

                img,
                picture img {
                    transform: translate(0px, -10px);
                }
            }

            @media(max-width: 768px) {
                grid-template-columns: 1fr;
            }

            picture {
                display: block;
                width: 100%;
            }

            img {
                margin-top: -50px;
                aspect-ratio: 16/9;
                width: 100%;
                object-fit: cover;
                transition: all 0.3s;
                display: block;

                @media(max-width: 992px) {
                    aspect-ratio: 1/1;
                }

                @media(max-width: 768px) {
                    aspect-ratio: 16/9;
                }
            }

            .service-item-content {
                display: flex;
                flex-direction: column;
                gap: var(--space-m);
                padding-bottom: var(--space-m);

                h3 {
                    color: var(--color-light-light);
                }

                p {
                    color: var(--color-secondary-light);
                }
            }
        }
    }
}