.intro {
    width: 100%;
    height: 90vh;
    min-height: 600px;
    max-height: 900px;
    position: relative;
    display: flex;
    justify-content: center;

    .image_wrapper {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;

        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: relative;
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        align-items: stretch;
        padding-left:  clamp(2rem, 8vh, 6rem);
        padding-bottom: clamp(2rem, 8vh, 6rem);
        
        
        
        
        
        
        
        
        
        
        
        

        * {
            color: #fff;
            border-color: #fff;
        }

        .intro__content {
            position: relative;
            z-index: 1;
            width: 100%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: stretch;
            padding: var(--gutter);
            
            
            
            
            
            
            
            
            
            

            &::after {
                content: '';
                background-color: var(--dark-blue);
                opacity: 0.88;
                position: absolute;
                top: 0;
                right: 0;
                bottom: 0;
                left: 0;
                z-index: 0;
            }

            .intro__content__wrapper {
                z-index: 1;
                display: flex;
                flex-direction: column;
                gap: clamp(1.5rem, 1rem + 2vw, 3rem);
            }

            .buttons {
                z-index: 1;
                align-self: flex-start;
            }
        }
    }
}

@media (min-width: 768px) {
    .intro .container {
        padding-left: 50%;
        .intro__content {
            /* padding: calc(var(--gutter) * 2); */
        }
    }
}

@media (min-width: 1024px) {
    .intro {

        .container {
            z-index: 1;
            position: relative;
            width: 100%;
            max-width: initial;
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: stretch;
            padding: 0;

            * {
                color: #fff;
                border-color: #fff;
            }

            .intro__content {
                z-index: 1;
                margin-left: auto;
                margin-bottom: 0;
                width: 50%;
                max-width: 900px;
                /* display: flex; */
                flex-direction: column;
                justify-content: center;
                align-items: flex-start;
                
                .intro__content__wrapper {
                    display: flex;
                    flex-direction: column;
                    gap: clamp(1.5rem, 1rem + 2vw, 3rem);
                }

                .buttons {
                    .btn {
                        align-self: flex-start;
                    }
                }
            }
        }
    }
}

.intro.layout-project {
    display: flex;
    flex-direction: column;
    position: relative;
    height: auto;
    min-height: 0;
    max-height: none;


    .container {
        max-width: none;
        margin: 0;
        padding: 25% 0 1rem 15%;
        
        .intro__content {
            margin-top: 0;
            min-height: 0;
        }
    }

    .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: 0rem;
            }

            .intro__projectdetails-tags {
                grid-column: 1 / span 2;
                grid-row: 1;
                display: grid;
                grid-template-columns: 1fr 1fr;
                gap: calc(var(--font-margin-p) * 0.5);
                margin-bottom: calc(var(--font-margin-p) * 0.5);
                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: flex;
                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: 30px 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: 40px;
                                max-height: 40px;
                                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);
                            line-height: 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: 28px;
                width: 28px;
                mask-repeat: no-repeat;

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

                &.open {
                    visibility: visible;
                    max-height: 1000px;
                    opacity: 1;
                }
            }
        }
    }
}

@media (min-width: 1024px) {
    .intro.layout-project {
        .container {
            padding: 5% 0;
        }
        .image_wrapper {
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
        }

        .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__projectdetails {
                .more_category_icons_trigger {
                    right: -48px;
                    top: 10px;
                }

                .visible_category_icons .category_icon .category_icon_wrapper svg,
                .more_category_icons .category_icon .category_icon_wrapper svg {
                    max-width: 60px;
                    max-height: 60px;
                }
            }
        }
    }
}