.services-headlines {
    color: rgb(var(--color-white));
    background: var(--bg-overlay), url("/img/binary.jpg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;

    > .services-headlines-container {
        padding: var(--space-sections-m) 0 var(--space-sections-s);

        > h1 {
            font-size: var(--font-size-l);
            font-weight: var(--font-weight-regular);
            line-height: var(--line-height-xl);
            margin-bottom: var(--space-8);
            animation: slide-up 1s forwards;
        }

        > p {
            max-width: 100%;
            margin-bottom: var(--space-16);
            font-size: var(--font-size-m);
            font-weight: var(--font-weight-thin);
            line-height: var(--line-height-m);
            animation: slide-up 1s forwards;
        }

        > .services-headlines-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            grid-column-gap: var(--space-4);
            grid-row-gap: var(--space-14);
            animation: slide-up 1s forwards;

            > .service-item {
                > .item-title {
                    display: flex;
                    justify-content: start;
                    align-items: center;
                    gap: var(--space-2);
                    margin-bottom: var(--space-8);

                    > i {
                        font-size: 24px;
                        font-weight: unset;
                    }

                    > h2 {
                        font-weight: var(--font-weight-bold);
                        font-size: var(--font-size-m);

                        > a {
                            color: inherit;

                            &:hover {
                                text-decoration: underline;
                            }
                        }
                    }
                }

                > p {
                    opacity: var(--opacity-700);
                    width: 90%;
                }
            }
        }
    }
}

@media (max-width: 820px) {
    .services-headlines {

        > .services-headlines-container {
            padding: var(--space-sections-m) var(--space-4) var(--space-sections-xs);
            text-align: center;

            > .services-headlines-grid {
                grid-template-columns: repeat(1, 1fr);
                grid-row-gap: var(--space-8);

                > .service-item {
                    > div.item-title {
                        justify-content: center;
                        margin-bottom: var(--space-4);
                    }

                    > p {
                        width: 100%;
                    }
                }
            }
        }
    }
}