.hero{

    --border-radius: 1.5rem;
    --width: 100%;
    --gap: var(--wp--preset--spacing--30);

    display: flex;
    align-items: center;
    gap: var(--gap);
    max-width: var(--wp--style--global--content-size);
    margin: 0 auto;
    padding: var(--wp--preset--spacing--mainpadding) 0;

    view-timeline-name: --hero;
    view-timeline-axis: block;

    

    .content{

        width: 60%;

        h1{

            font-size:var(--wp--preset--font-size--xx-large);
            .grey{
                color: var(--wp--preset--color--accent-light);
                display: inline;
            }

        }

        h2{
            color: var(--wp--preset--color--text);
            font-weight: normal;
            font-size:var(--wp--preset--font-size--large);
            margin-top: .8rem !important;
            margin-bottom: 3rem !important;
        }

        span{
            margin-bottom: 1rem !important;
            display: block;
        }

        aside{
            box-shadow: var(--wp--custom--box-shadow);
            border-radius: var(--border-radius);
            padding: var(--wp--preset--spacing--10) var(--wp--preset--spacing--30);
            display: inline-block;
            margin-bottom: 2rem;
        }

        .meta{
            display: inline-flex;
            gap: 1rem;
            font-size: 1rem;
            align-items: center;

            span{
                margin-bottom: 0 !important;
                display: inline;
            }

            a{
                border-radius: 5rem;
                font-size: 1rem;
                padding: var(--wp--preset--spacing--10);
                background: var(--wp--preset--color--light);
                color: var(--wp--preset--color--text);
                border: var(--wp--custom--main-border);

                transition: var(--wp--custom--main-trans);
                display: inline-flex;
                align-items: center;
                gap: .5em;

                &::before{
                    content: '';
                    background: var(--term-color);
                    width: 1em;
                    aspect-ratio: 1 / 1;
                    border-radius: 5rem;
                    position: relative;
                    display: block;
                    
                }

                 &:hover{
                    
                    border-color: var(--term-color);
                    box-shadow: var(--wp--custom--box-shadow);
                    transform: translateY(-.25rem);
                    cursor: pointer;
                }

                
            }
        }

        .buttons{
            display: flex;
            gap: var(--gap);
        }

        .farbe{
            background: var(--wp--preset--color--ci-yellow);
            border-radius: 5rem;
            color: var(--wp--preset--color--accent);
            transition: var(--wp--custom--main-trans);
            padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--30);
            display: inline-block;

            &:hover{
                background: var(--wp--preset--color--accent);
                color: var(--wp--preset--color--light);
                border-color: var(--wp--preset--color--accent);
                box-shadow: var(--wp--custom--box-shadow);
                transform: translateY(-.25rem);
                cursor: pointer;
            }
        }

        .outline{
            background: transparent;
            border: var(--wp--custom--main-border);
            border-color: var(--wp--preset--color--accent);
            border-radius: 5rem;
            padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--30);
            transition: var(--wp--custom--main-trans);
            display: inline-block;

            &:hover{
                background: var(--wp--preset--color--accent);
                color: var(--wp--preset--color--light);
                border-color: var(--wp--preset--color--accent);
                box-shadow: var(--wp--custom--box-shadow);
                transform: translateY(-.25rem);
                cursor: pointer;
            }
        }
    }


    .images{
         width: 40%;
         gap: var(--gap);
         display: flex;
         flex-wrap: wrap;

         figure{
            margin: 0;
            overflow: hidden;
            border-radius: var(--border-radius);
            align-self: flex-start;
            aspect-ratio: 4 / 3;
            width: 100%;

            animation: parallax linear;
            animation-timeline: --hero;

            img{
                width: 100%;
                height: 100%;
                object-fit: cover;
            }

           
        }
    }    
}


@keyframes parallax {
        from {
            transform: translateY(-15%);
        }
        to {
            transform: translateY(25%);
        }
    }


@media screen and (max-width: 990px){
    .hero{
        view-timeline-name: unset;
        view-timeline-axis: unset;

        flex-direction: column-reverse;

        .content,
        .images{
            width: 100%;

            figure{

                &.topimage,
                &.bottomimage{
                    display: none;
                }


                &.centerimage{
                    aspect-ratio: 16 / 9;
                    max-width: unset;
                }
            }
        }

        .content{
           h2{
                margin-bottom: 1rem !important;
            }

             .buttons{
                gap: 1rem;
            }


            aside{
                width: 100%;
                box-sizing: border-box;

                .meta{
                    width: 100%;
                    display: block;
                    padding: .5rem 0;

                    &:last-of-type{
                        border-top: var(--wp--custom--main-border);
                        border-color: var(--wp--preset--color--text);
                    }

                    span{
                        display: none;
                    }
                }

            }
        }
    }
}


@media screen and (max-width: 768px){
    .hero{

        gap: var(--wp--preset--spacing--10);

        .content{

              h1, h2{
                margin-bottom: var(--wp--preset--spacing--10) !important;
                margin-top:  0!important;
            }

            h2{
                margin-bottom: var(--wp--preset--spacing--50) !important;
            }
    
            .buttons{
                flex-direction: column;
                margin-top: var(--wp--preset--spacing--10);

                a{
                    text-align: center;
                    padding: 1rem;
                }
            }
        }
    }
}