.intro {
    width: 100%;
    height: 90vh;
    min-height: 600px;
    max-height: 900px;
    position: relative;
    display: flex;
    justify-content: center;
    
    
    
    
    
    .image_wrapper {
        position: absolute;
        top: 0px;
        right: 0px;
        bottom: 0px;
        left: 0px;
        figure {
            display: block;
            width: 100%;
            height: 100%;
            picture {
                display: block;
                height: 100%;

                img {
                    width: 100%;
                    height: 100%;
                    display: block;
                    object-fit: cover;
                }
            }
        }
    }
   
    .container {
        z-index: 1;
        /* position: absolute; */
        width: 100%;
        Height: 100%;
        bottom: 0px;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-end;
        
        
        * {
            color: #fff;
            border-color: #fff;
        }

        .intro__content {
            position: relative;
            z-index: 1;
            margin-top: clamp(200px, calc(50vh - var(--header-height)), 450px);
            width: 100%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: flex-start;
            /* padding: var(--gutter); */
            
            
            
            
            
            

            &::after {
                content: '';
                background-color: var(--dark-blue);
                opacity: 0.88;
                /* mix-blend-mode: multiply; */
                position: absolute;
                left: 0px;
                right: 0px;
                top: 0px;
                bottom: 0px;
                z-index: 0;
            }
      
            .intro__content__wrapper {
                z-index: 1;
                display: flex;
                flex-direction: column;
                height: 100%;
                width: 100%;
                align-self: flex-end;
                justify-content: space-between;
                padding: calc(var(--gutter) * 2);
            }

            .buttons {
                z-index: 1;
                align-self: flex-start;
                margin-top: clamp(3.75rem, 2.9383rem + 3.4632vw, 6.25rem);
            }
        }
        
    }
}

.intro.layout-project {
    .container {
        max-width: initial;
        .intro__content {
            min-height: initial;
        }
    }
    .intro__content__wrapper {
        .intro__text { 
            ul.meta {
                list-style: none;
                padding: 0;
                display: flex;
                gap: var(--gap);
                text-transform: uppercase;
                margin-bottom: var(--font-margin-p);
                li {
                    position: relative;
                    &::after {
                        content: '|';
                        position: absolute;
                        top: -2px;
                        right: calc((var(--gap) / 2) * -1);
                    }
                }
                li:nth-child(2) {
                    color: var(--light-blue);
                    font-weight: 600;
                    &::after {
                        display: none;
                    }
                }
            }

            .intro__projectdetails {
                display: grid;
                grid-template-columns: 1fr 1fr;
                column-gap: var(--gap);
                row-gap: var(--font-margin-p);

                .label {
                    font-size: var(--font-size-h3);
                    line-height: var(--line-height-h3);
                    font-family: var(--font-family-display);
                    font-weight: var(--font-weight-bold);
                    text-transform: uppercase;
                    margin-bottom: 1rem;
                }

                .intro__projectdetails-tags {
                    grid-column: 1 / span 2;
                    grid-row: 1;
                    display: grid;
                    grid-template-columns: 1fr 1fr;
                    gap: var(--font-margin-p);
                    margin-bottom: var(--font-margin-p);
                    max-width: 650px;
                }
                .project__client {
                    grid-column: 1;
                    grid-row: 1;
                }
                .project__construction_time {
                    grid-column: 2;
                    grid-row: 1;
                }
                .visible_category_icons, .more_category_icons {
                    position: relative;
                    grid-column: 1 /span 2;
                    grid-row: 2;
                    padding: 0;
                    display: grid;
                    grid-template-columns: 1fr 1fr 1fr;
                    list-style: none;
                    column-gap: var(--gap);
                    row-gap: var(--gap);
                    max-width: 650px;
                    .category_icon {
                        display: flex;
                        flex-direction: column;
                        align-items: center;
                        .category_icon_wrapper {
                            display: grid;
                            grid-template-rows: 75px auto;
                            align-items: center;
                            justify-content: center;
                            .category_icon__file {
                                display: flex;
                                justify-content: center;
                                align-items: center;
                            }
                                svg {
                                    display: block;
                                    width: 100%;
                                    height: 100%;
                                    max-width: 50px;
                                    max-height: 50px;
                                    justify-self: center;
                                    align-self: center;
                                    margin-bottom: 1rem;
                                    path {
                                        stroke: #fff;
                                    }
                                    path.lighten {
                                        stroke: none;
                                        fill: var(--main-color);
                                    }
                                }
                            .category_icon__description {
                                font-size: clamp(0.75rem, 0.6485rem + 0.4329vw, 1.0625rem);
                                text-align: center;
                                text-transform: uppercase;
                                hyphens: auto;
                                hyphenate-limit-chars: auto 6;
                                hyphenate-limit-lines: 4;
                            }
                        }
                    }
                }
                .more_category_icons_trigger {
                    position: absolute;
                    right: -20px;
                    top: -30px;
                    text-indent: -999999px;
                    mask-image: url('data:image/svg+xml,<svg version="1.1" viewBox="0 0 91.903 92.302" xmlns="http://www.w3.org/2000/svg"><path d="m37.772 2e-3v37.373h-37.772v16.758h37.772v38.169h16.625v-38.171h37.506v-16.758h-37.506v-37.371z" fill="%238bd6e6" data-name="Pfad 1087"/></svg>');
                    background-color: #fff;
                    height: 48px;
                    width: 48px;
                    mask-repeat: no-repeat;
                }
                .more_category_icons_trigger.active {
                    mask-image: url('data:image/svg+xml,<svg version="1.1" viewBox="0 0 91.903 92.302" xmlns="http://www.w3.org/2000/svg"><path d="m0 37.375v16.758l91.903-2e-3v-16.758z" fill="%238bd6e6" data-name="Pfad 1087"/></svg>');
                }
                .more_category_icons {
                    overflow: hidden;
                    visibility: hidden;
                    max-height: 0;
                    opacity: 0;
                    grid-row: 3;
                    transition: all ease 0.3s;
                }
                .more_category_icons.open {
                    visibility: visible;
                    max-height: 1000px;
                    opacity: 1;
                }
            }
        }
    }
}
@media (min-width: 1024px) {

    .intro {
	max-height: 900px;

        &::after {
            content: '';
            background-color: var(--dark-blue);
            opacity: 0.88;
            /* mix-blend-mode: multiply; */
            width: 50%;
            position: absolute;
            right: 0px;
            top: 0px;
            bottom: 0px;
            z-index: 0;
        }
        
        .container {

            z-index: 1;
            position: relative;
            width: 100%;
            max-width: var(--page-max-width);
            top: 0px;
            bottom: 0px;
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            justify-content: center;

            * {
                color: #fff;
                border-color: #fff;
            }
            .intro__content {
                z-index: 1;
                margin-top: 0;
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: flex-start;
                left: 50%;
                width: 50%;
                &::after {
                    display: none;
                }

                .intro__content__wrapper {
                    display: flex;
                    flex-direction: column;
                    height: 100%;
                    align-self: center;
                    justify-content: space-between;
                }

                .btn {
                    z-index: 1;
                    align-self: flex-start;
                }
            }
        }
    }
    .intro.layout-project {
        & .intro__content__wrapper {
            & .intro__text {
                & h1 {
                    font-size: calc(var(--font-size-h1) * 0.65);
			line-height: calc(var(--line-height-h1) * 0.65);
                }
            }
        }
    }

    .intro.layout-project {
        & .intro__content__wrapper {
            & .intro__text {
                & .intro__projectdetails {
                    & .more_category_icons_trigger {
                        right: -48px;
                        top: 10px;
                    }
                    & .visible_category_icons, .more_category_icons {
                        & .category_icon {
                            & .category_icon_wrapper {
                                svg {
                                    max-width: 60px;
                                    max-height: 60px;
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}