.welcome-text {
    width: 100%;
    height: 80vh;
    background-image: url("/images/koelnerDom.jpg");
    background-size: cover;
    background-position: center;

    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
    padding: var(--3xl);

    h1 {
        color: white;
        font-weight: 750;
    }
}

.welcome-section {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: calc(var(--3xl) * 3) 0;
    max-width: 80vw;
    margin: 0 auto;
    padding-top: var(--3xl);

    .grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-auto-rows: auto;
        column-gap: var(--3xl);
        row-gap: var(--3xl);
        align-items: center;
    }

    .image1 {
        grid-column: 1;
        grid-row: 1;
    }

    .text1 {
        grid-column: 2;
        grid-row: 1;
    }

    .text2 {
        grid-column: 1;
        grid-row: 2;
    }

    .text3 {
        grid-column: 2;
        grid-row: 3;
    }

    .image2 {
        grid-column: 2;
        grid-row: 2;
    }

    .image1 img,
    .image2 img,
    .image3 img {
        aspect-ratio: 3/2;
        max-width: 100%;
        display: block;
        object-fit: contain
    }

    .text1,
    .text2,
    .text3 {
        h2 {
            font-size: var(--3xl);
            margin-bottom: var(--3xl);
        }
        p {
            font-size: var(--m);
            letter-spacing: 5%;
            line-height: 2;
        }
        ul {
            display: flex;
            flex-direction: column;
            gap: var(--m);
            list-style-type: none;
            padding: 0;
            li {
                font-size: var(--m);
                letter-spacing: 5%;
                line-height: 2;

                a {
                    color: var(--primary);
                    text-decoration: none;
                    font-weight: 700;
                }
            }
        }
    }
}

@media (max-width: 768px) {
    .welcome-text {
        width: 100vw;
        height: 30vh;
        h1 {
            font-size: var(--xl);
        }
    }

    .welcome-section {
        padding-top: var(--xxl);
        padding-bottom: 0;
        gap: 0;
        .grid {
            grid-template-columns: 1fr;
            grid-template-areas:
                "image1"
                "text1"
                "image2"
                "text2"
                "image3"
                "text3";

            .text1 {
                grid-area: text1;
            }
            .text2 {
                grid-area: text2;
            }
            .text3 {
                grid-area: text3;
            }
            .image1 {
                grid-area: image1;
            }
            .image2 {
                grid-area: image2;
            }
            .image3 {
                grid-area: image3;
            }
        }
    }
}