.frontpage {
    background: var(--black);
    .frontpage__hero {
        position: relative;
        width: 100%;
        height: 100svh;

        h1 {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);

            margin: 0;
            color: var(--white);

            z-index: 1;

            span {
                display: block;

                font-size: 4vw;
                font-weight: normal;
                line-height: 1;

                text-shadow: 0 1px 1px var(--grey-light), 1px 0 1px var(--grey-light), -1px 0 1px var(--grey-light), 0 -1px 1px var(--grey-light);

                @media(min-width: 992px) {
                    font-size: 2vw;
                }

                &:first-child {
                    font-size: 20vw;
                    line-height: 1.5;
                    color: var(--grey-dark);
                    text-align: center;
                    /*text-shadow: 0 1px 3px var(--grey-light), 1px 0 3px var(--grey-light), -1px 0 3px var(--grey-light), 0 -1px 3px var(--grey-light);*/

                    @media(min-width: 992px) {
                        font-size: 10vw;
                        text-shadow: 0 1px 3px var(--grey-light), 1px 0 3px var(--grey-light), -1px 0 3px var(--grey-light), 0 -1px 3px var(--grey-light);
                    }
                }
                &:nth-child(2) {
                    font-size: 10vw;
                    color: var(--grey-dark);

                    @media(min-width: 992px) {
                        font-size: 3vw;
                    }
                }
                &:nth-child(3) {
                    font-size: 6vw;
                    color: var(--grey-dark);

                    @media(min-width: 992px) {
                        font-size: 2vw;
                    }
                }
            }
            .link {
                text-decoration: none;
                transition: text-shadow var(--transition-duration);
                &.link--primary {
                    text-shadow: 0 1px 1px var(--primary), 1px 0 1px var(--primary), -1px 0 1px var(--primary), 0 -1px 1px var(--primary);
                    &:hover {
                        text-shadow: 0 3px 3px var(--primary), 3px 0 3px var(--primary), -3px 0 3px var(--primary), 0 -3px 3px var(--primary);
                    }
                }
                &.link--secondary {
                    text-shadow: 0 1px 1px var(--secondary), 1px 0 1px var(--secondary), -1px 0 1px var(--secondary), 0 -1px 1px var(--secondary);
                    &:hover {
                        text-shadow: 0 3px 3px var(--secondary), 3px 0 3px var(--secondary), -3px 0 3px var(--secondary), 0 -3px 3px var(--secondary);
                    }
                }
                &.link--tertiary {
                    text-shadow: 0 1px 1px var(--tertiary), 1px 0 1px var(--tertiary), -1px 0 1px var(--tertiary), 0 -1px 1px var(--tertiary);
                    &:hover {
                        text-shadow: 0 3px 3px var(--tertiary), 3px 0 3px var(--tertiary), -3px 0 3px var(--tertiary), 0 -3px 3px var(--tertiary);
                    }
                }
            }

            .breathe {
                /*animation: breathe 3s ease-in-out infinite;*/
                animation: text-shadow 3s ease-in-out infinite;
            }
        }
    }

    .frontpage__content {
        position: relative;

        .artikel--block_1 {
            display: grid;
            grid-template-columns: auto;
            grid-gap: calc(var(--gutter-width));
            @media(min-width: 576px) {
                max-width: 540px
            }
            @media(min-width: 768px) {
                max-width: 720px;
            }
            @media(min-width: 992px) {
                max-width: 960px;
            }
            @media(min-width: 1200px) {
                max-width: 1140px;
            }
            @media(min-width: 1400px) {
                grid-template-columns: repeat(3, 1fr);
            }
        }
    }
}


@keyframes text-shadow {
    from, to {
        text-shadow: 0 1px 3px var(--grey-light), 1px 0 3px var(--grey-light), -1px 0 3px var(--grey-light), 0 -1px 3px var(--grey-light);
    }
    50% {
        text-shadow: 0 2px 6px var(--grey-light), 2px 0 6px var(--grey-light), -2px 0 6px var(--grey-light), 0 -2px 6px var(--grey-light);
    }
}
@keyframes breathe {
    from, to {
        font-variation-settings: 'wght' 100;
    }
    2% {
        font-variation-settings: 'wght' 100;
    }
    48% {
        font-variation-settings: 'wght' 900;
    }
    50% {
        font-variation-settings: 'wght' 1000;
    }
    52% {
        font-variation-settings: 'wght' 900;
    }
    98% {
        font-variation-settings: 'wght' 100;
    }
}