.hero {
    background: var(--bg-overlay), var(--chip-image);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;

    > .hero-container {
        padding: var(--space-sections-m) 0 var(--space-sections-m) 0;

        > :is(h1, p) {
            color: rgb(var(--color-white));
            text-align: center;
            white-space: pre-wrap;
        }

        > h1 {
            font-size: var(--font-size-l);
            font-weight: var(--font-weight-bold);
            margin-bottom: var(--space-12);
            line-height: var(--line-height-xl);
            animation: slide-up 1s forwards;
            text-wrap: nowrap;
        }

        > p {
            padding: 0 var(--space-12);
            font-size: var(--font-size-m);
            font-weight: var(--font-weight-thin);
            line-height: var(--line-height-m);
            animation: slide-up 1s forwards;

            a {
                color: inherit;

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

@media (max-width: 1020px) {
    .hero {
        .hero-container {
            > h1 {
                text-wrap: wrap;
            }
        }
    }
}

@media (max-width: 820px) { 
    .hero {
        .hero-container {
            padding: var(--space-sections-m) 0 var(--space-sections-s);
            
            > h1 {
                font-size: var(--font-size-l);
                margin-bottom: var(--space-8) ;
                text-wrap: wrap;
            }

            > p {
                padding: 0 var(--space-4);
            }
        }
    }
}

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

        > h2 {
            font-size: var(--font-size-ml);
            font-weight: var(--font-weight-regular);
            line-height: var(--line-height-ml);
            margin-bottom: var(--space-8);
        }

        > .services-headlines-grid {

            > .service-item {
                > .item-title {
                    > h3 {
                        font-weight: var(--font-weight-bold);
                        font-size: var(--font-size-m);

                        > a {
                            color: inherit;

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

@media (max-width: 820px) {
    section.home {
        > .services-headlines-container {
            padding: var(--space-sections-xs) var(--space-4) var(--space-sections-xs);
        }
    }
}