.hero{

    --border-radius: 1.5rem;
    --width: 100%;
    --gap: 2rem;

    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;
        }

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

        .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;

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

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

            &.topimage{
                aspect-ratio: 4 / 3;
                max-width: calc(var(--width) / 2 - var(--gap));
                display: block;
                margin-left: calc(var(--width) / 3);
            }

            &.centerimage{
                aspect-ratio: 4 / 3;
                max-width: calc(var(--width) - (var(--width) / 3) - var(--gap));
                display: inline-block;
            }

            &.bottomimage{
                aspect-ratio: 2 / 4;
                max-width: calc(var(--width) / 3 -  var(--gap));
                margin-top: calc(2 * var(--gap));
            }
        }
    }    
}


@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%;

            .farbe,
            .outline{
                display: block;
            }

            figure{

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


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

            .buttons{
                gap: 1rem;
            }
        }

        
    }
}

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

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

        .content,
        .images{

             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;
                }
            }
        }

        
    }
}