.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--4-dvw);
            .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--2-dvw);
            margin-top: .8rem !important;
            margin-bottom: 3rem !important;
        }

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

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

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