#services {
    @media (max-width: 1239px) {

        margin-bottom: 80px;

        .head {
            display: flex;
            flex-direction: row;
            justify-content: space-between;

            margin-bottom: 30px;
        }

        .body {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 20px;
        }

        .bottom {
            display: none;
        }

        .headline {
            font-family: var(--second-family);
            font-weight: 500;
            font-size: 35px;
            line-height: 100%;
            text-transform: uppercase;
            color: #fff;
        }

        .miniline {
            font-family: var(--font-family);
            font-weight: 400;
            font-size: 14px;
            text-transform: uppercase;
            color: #696969;
        }

        .card {
            border-radius: 14px;
            width: 190px;
            height: 254px;
            background: #0b0b0b;

            position: relative;
            overflow: hidden;
        }

        .content {
            position: absolute;
            bottom: 0;
            padding-left: 8px;
            padding-right: 8px;
            padding-bottom: 18px;
        }

        .card img {
            position: absolute;
            left: 0;
            top: 0;

            max-width: 180px;
            max-height: 180px;
        }

        .ellipse {
            width: 230px;
            height: 150px;
            border-radius: 100%;

            position: absolute;
            
            filter: blur(65px);
            background-color: #6170e2;
            opacity: .9;
            
            top: -60px;
            left: -20px;

            will-change: transform, opacity;
            transform: translateZ(0);
        }

        .title {
            font-family: var(--font-family);
            font-weight: 600;
            font-size: 20px;
            color: #fff;

            text-align: center;
            margin-bottom: 2px;
        }

        .description {
            font-family: var(--font-family);
            font-weight: 400;
            font-size: 14px;
            color: #9d9d9d;

            text-align: center;
        }
    }

    @media (min-width: 1240px) {
        .head {
            display: flex;
            flex-direction: row;
            justify-content: space-between;

            margin-bottom: 78px;
        }

        .body {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 14px;
        }

        .bottom {
            display: none;
        }

        .headline {
            font-family: var(--second-family);
            font-weight: 500;
            font-size: 75px;
            line-height: 100%;
            text-transform: uppercase;
            color: #fff;
        }

        .miniline {
            font-family: var(--font-family);
            font-weight: 400;
            font-size: 20px;
            text-transform: uppercase;
            color: #696969;
        }

        .card {
            border-radius: 20px;
            width: 557px;
            height: 195px;
            background: #0b0b0b;

            position: relative;
            overflow: hidden;
        }

        .content {
            position: absolute;
            bottom: 0;
            padding-bottom: 32px;
            padding-left: 30px;
        }

        .card img {
            position: absolute;
            right: 0;
            top: 0;

            max-width: 200px;
            max-height: 200px;
        }

        .ellipse {
            width: 400px;
            height: 93px;
            border-radius: 100%;

            position: absolute;

            filter: blur(82px);
            background-color: #6170e2;
            opacity: .9;

            top: -5px;
            right: -40px;

            will-change: transform, opacity;
            transform: translateZ(0);
        }

        .title {
            font-family: var(--font-family);
            font-weight: 600;
            font-size: 28px;
            color: #fff;

            margin-bottom: 5px;
        }

        .description {
            font-family: var(--font-family);
            font-weight: 400;
            font-size: 16px;
            color: #9d9d9d;
        }
    }
}