header > #images {
    display: grid;
    column-gap: 1.6%;
    row-gap: 4%;
    margin-bottom: 3%;
    margin-left: 26px;
    margin-right: 26px;
}
#images {
    /* border-radius: 25px; */
    overflow: hidden;
}
#images > img {
    border-radius: 15px;
    /* height: 100%; */
    width: 100%;
}

h2:has( + #images ) {
    padding: 5px 0 10px 0;
}

/***********
  2 Bilder
************/

header > #images.grid21,
header > #images.grid22 {
    grid-row: 1/2;
}
.grid21 :nth-child(3),
.grid21 :nth-child(4),
.grid22 :nth-child(3),
.grid22 :nth-child(4) {
    display: none;
}

/*
----------
|  |     |
----------
*/
.grid21 :nth-child(1) {
    grid-column: 1/2;
}
.grid21 :nth-child(2) {
    grid-column: 2/4;
}

/*
----------
|     |  |
----------
*/
.grid22 :nth-child(1) {
    grid-column: 1/3;
}
.grid22 :nth-child(2) {
    grid-column: 3/4;
}

/***********
  3 Bilder
************/

.grid31 :nth-child(4),
.grid32 :nth-child(4),
.grid33 :nth-child(4) {
    display: none;
}
header > #images.grid31,
header > #images.grid32,
header > #images.grid33 {
    grid-template-columns: 25%;
    grid-row: 1/2;
}

/*
-------------
|  |  |     |
-------------
*/
.grid31 :nth-child(1) {
    grid-column: 1/2;
}
.grid31 :nth-child(2) {
    grid-column: 2/3;
}
.grid31 :nth-child(3) {
    grid-column: 3/5;
}

/*
-------------
|  |     |  |
-------------
*/
.grid32 :nth-child(1) {
    grid-column: 1/2;
}
.grid32 :nth-child(2) {
    grid-column: 2/4;
}
.grid32 :nth-child(3) {
    grid-column: 4/5;
}

/*
-------------
|     |  |  |
-------------
*/
.grid33 :nth-child(1) {
    grid-column: 1/3;
}
.grid33 :nth-child(2) {
    grid-column: 3/4;
}
.grid33 :nth-child(3) {
    grid-column: 4/5;
}

/***********
  4 Bilder
************/

header > #images.grid41,
header > #images.grid42 {
    grid-template-columns: 32.4% 32.4% 32%;
}

header > #images.grid43,
header > #images.grid44 {
    grid-template-columns: 32% 32.4% 32.4%;
}

/*
----------
|     |  |
------|  |
|  |  |  |
----------
*/
.grid41 :nth-child(1) {
    grid-column: 1/3;
    grid-row: 1/2;
}
.grid41 :nth-child(2) {
    grid-column: 3/4;
    grid-row: 1/3;
}
.grid41 :nth-child(3) {
    grid-column: 1/2;
    grid-row: 2/3;
}
.grid41 :nth-child(4) {
    grid-column: 2/3;
    grid-row: 2/3;
}

/*
----------
|  |  |  |
------|  |
|     |  |
----------
*/
.grid42 :nth-child(1) {
    grid-column: 1/2;
    grid-row: 1/2;
}
.grid42 :nth-child(2) {
    grid-column: 2/3;
    grid-row: 1/2;
}
.grid42 :nth-child(3) {
    grid-column: 3/4;
    grid-row: 1/3;
}
.grid42 :nth-child(4) {
    grid-column: 1/3;
    grid-row: 2/3;
}

/*
----------
|  |  |  |
|  |-----|
|  |     |
----------
*/
.grid43 :nth-child(1) {
    grid-column: 1/2;
    grid-row: 1/3;
}
.grid43 :nth-child(2) {
    grid-column: 2/3;
    grid-row: 1/2;
}
.grid43 :nth-child(3) {
    grid-column: 3/4;
    grid-row: 1/2;
}
.grid43 :nth-child(4) {
    grid-column: 2/4;
    grid-row: 2/3;
}

/*
----------
|  |     |
|  |-----|
|  |  |  |
----------
*/
.grid44 :nth-child(1) {
    grid-column: 1/2;
    grid-row: 1/3;
}
.grid44 :nth-child(2) {
    grid-column: 2/4;
    grid-row: 1/2;
}
.grid44 :nth-child(3) {
    grid-column: 2/3;
    grid-row: 2/3;
}
.grid44 :nth-child(4) {
    grid-column: 3/4;
    grid-row: 2/3;
}

@media screen and ( max-width: 500px ) {
    :root {
        --aniDelay: 4s;
        --aniCount: 3;
    }

    @keyframes inOut4 {
        0% { opacity: 0; }
        5% { opacity: 1; }
        23% { opacity: 1; }
        28% { opacity: 0; }
        100% { opacity: 0; }
    }

    @keyframes inOut3 {
        0% { opacity: 0; }
        5% { opacity: 1; }
        38% { opacity: 1; }
        44% { opacity: 0; }
        100% { opacity: 0; }
    }

    @keyframes inOut2 {
        0% { opacity: 0; }
        5% { opacity: 1; }
        50% { opacity: 1; }
        55% { opacity: 0; }
        100% { opacity: 0; }
    }

    header > #images {
        grid-template-columns: 100% !Important;
        row-gap: 0;
        column-gap: 0;
    }
    header > #images img {
        grid-column: 1/2;
        grid-row: 1/2;
        opacity: 0;
        border-radius: 0;
        height: auto;
    }

    /** 2 Bilder **/
    header > #images:has(img:nth-child(2)) {
        --aniCount: 2;
    }
    header > #images:has(img:nth-child(2)) img {
        animation: inOut2 calc(var(--aniDelay) * var(--aniCount)) infinite ease-in-out;
    }
    header > #images:has(img:nth-child(2)) img:nth-child(2) {
        animation-delay: var(--aniDelay);
    }

    /** 3 Bilder **/
    header > #images:has(img:nth-child(3)) {
        --aniCount: 3;
    }
    header > #images:has(img:nth-child(3)) img {
        animation: inOut3 calc(var(--aniDelay) * var(--aniCount)) infinite ease-in-out;
    }
    header > #images:has(img:nth-child(3)) img:nth-child(2) {
        animation-delay: calc(var(--aniDelay));
    }
    header > #images:has(img:nth-child(3)) img:nth-child(3) {
        animation-delay: calc(var(--aniDelay) * 2);
    }

    /** 4 Bilder **/
    header > #images:has(img:nth-child(4)) {
        --aniCount: 4;
    }
    header > #images:has(img:nth-child(4)) img {
        animation: inOut4 calc(var(--aniDelay) * var(--aniCount)) infinite ease-in-out;
    }
    header > #images:has(img:nth-child(4)) img:nth-child(2) {
        animation-delay: calc(var(--aniDelay));
    }
    header > #images:has(img:nth-child(4)) img:nth-child(3) {
        animation-delay: calc(var(--aniDelay) * 2);
    }
    header > #images:has(img:nth-child(4)) img:nth-child(4) {
        animation-delay: calc(var(--aniDelay) * 3);
    }

    /** Bildausschnitte waagerecht **/
    #images.grid21 :nth-child(2),
    #images.grid22 :nth-child(1),
    #images.grid31 :nth-child(3),
    #images.grid32 :nth-child(2),
    #images.grid33 :nth-child(1),

    #images.grid41 :nth-child(1),
    #images.grid42 :nth-child(4),
    #images.grid43 :nth-child(4),
    #images.grid44 :nth-child(2) {
        width: 207%;
        margin-left: -50%;
    }

    /** Bildausschnitte senkrecht **/
    #images.grid41 :nth-child(2),
    #images.grid42 :nth-child(3),
    #images.grid43 :nth-child(1),
    #images.grid44 :nth-child(1) {
        /* height: 150%; */
        /* width: auto; */
        max-width: 100;
        margin-top: -10%;
        margin-bottom: -70%;
    }
}

@media screen and ( max-width: 470px ) {
	header > #images {
		margin-left: 0;
		margin-right: 0;
	}
}