.services {
    .items {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        justify-content: space-around;
        gap: 40px;
        margin-top: 80px;
        .item {
            width: 100%;
            background: var(--dark-b);
            border-radius: 40px;
            box-shadow: var(--shadow-main);
            padding: 30px;
            position: relative;
            transition: .2s linear;
            img {
                border-radius: 10px;
                height: 280px;
                object-fit: cover;
            }
            .title {
                margin-top: 30px;
                display: flex;
                justify-content: space-between;
                align-items: center;
                margin-bottom: 40px;
                gap: 10px;
                h3 {
                    font-size: 26px;
                    width: fit-content;
                    max-width: 320px;
                    display: flex;
                    gap: 20px;
                }
                span {
                    width: 1px;
                    height: 64px;
                    background: var(--white-30);
                    border-radius: 2px;
                    display: block;
                    align-self: center;
                }
                &::after {
                    font-family: icon;
                    font-size: 40px;
                }
                &.e900 {
                    &::after {
                        content: '\e900';
                    }
                }
                &.e902 {
                    &::after {
                       content: '\e902';
                    }
                }
                &.e904 {
                    &::after {
                       content: '\e904';
                    }
                }
                &.e905 {
                    &::after {
                        content: '\e905';
                    }
                }
                &.e90f {
                    &::after {
                        content: '\e90f';
                    }
                }
            }
            p {
                max-width: 340px;
                color: var(--white-70);
            }
            a {
                position: absolute;
                left: 0;
                top: 0;
                width: 100%;
                height: 100%;
            }
        }
    }
}
@media screen and (max-width: 1720px) {
    .services .items {
        margin-top: 60px;
        .item {
            padding: 20px 20px 30px;
            border-radius: 20px;
            .title {
                margin: 30px 0;
                gap: 10px;
                h3 {
                    font-size: 22px;
                }
                &::after {
                    font-size: 40px;
                }
            }
        }
    }
}
@media screen and (max-width: 1279px) {
    .services {
        .items {
            grid-template-columns: repeat(2, 1fr);
            gap: 40px;
            .item {
                .title {
                    h3 {
                        font-size: 18px;
                    }
                    span {
                        height: 40px;
                    }
                }
                p {
                    font-size: 14px;
                }
            }
        }
    }
}
@media screen and (max-width: 767px) {
    .services {
        .items {
            margin-top: 40px;
            display: flex;
            flex-direction: column;
            .item {
                border-radius: 20px;
                .title {
                    gap: 20px;
                    align-items: center;
                    h3 {
                        font-size: 18px;
                        word-wrap: break-word;
                        word-break: break-word;
                    }
                    span {
                        height: 40px;
                    }
                    &::after {
                        font-size: 24px;
                    }
                }
                p {
                    font-size: 14px;
                }
            }
        }
    }
}
@media screen and (hover: hover) {
    .services .items .item:hover {
        transform: translateY(-10px);
        box-shadow: 0 0 10px 6px rgba(196, 250, 248, .3);
    }
}