body {
grid-template-rows: auto;
}
main {
display: grid;
grid-template-columns: 5% 90%;
grid-template-rows: auto;
grid-template-areas: 
"kapitel-name-bewegtbild film-1"
"kapitel-name-bewegtbild film-houyi"
"kapitel-name-bewegtbild text-houyi"
"kapitel-name-bewegtbild film-2"
"kapitel-name-bewegtbild film-schneemann"
"kapitel-name-bewegtbild text-schneemann";
background-color: var(--hintergrund-8);
}
.projekt-name {
margin-bottom: 5vh;
width: 95%;
margin-left: 5vw;
color: var(--textfarbe-5);
font-weight: 550;
}
.projekt-film {
display: flex;
width: 60%;
justify-content: center;
align-items: center;
text-align: center;
margin-left: 25%;
}
.projekt-film-text {
display: flex;
width: 80%;
justify-content: center;
align-items: center;
text-align: justify;
margin: 3vh 0 0 15vw;
}
.kapitel-name {
height: 45%;
height: calc(45vh + (30 - 45) * ((100vh - 300px) / (600 - 300)));
font-size: 60%;
font-size: calc(8px + (15 - 8) * ((100vh - 300px) / (800 - 300)));
top: 50vh;
top: calc(50vh + (0 - 50) * ((100vh - 300px) / (600 - 300)));
}

#film-1 {
grid-area: film-1;
margin-top: calc(27.5vh + (30 - 25) * ((100vh - 500px) / (1000 - 500)));
}
#film-houyi {
grid-area: film-houyi;
}
#text-houyi {
grid-area: text-houyi;
}
#film-2 {
grid-area: film-2;
margin-top: 10vh;
}
#film-schneemann {
grid-area: film-schneemann;
}
#text-schneemann {
grid-area: text-schneemann;
margin-bottom: 7.5vh;
}

@media screen and (min-width: 1000px){

main {
grid-template-columns: 5% 48% 45%;
grid-template-areas: 
"kapitel-name-bewegtbild film-1 film-1"
"kapitel-name-bewegtbild film-houyi text-houyi"
"kapitel-name-bewegtbild film-2 film-2"
"kapitel-name-bewegtbild text-schneemann film-schneemann";
}
.projekt-film {
width: 80%;
justify-content: center;
align-items: center;
text-align: center;
margin-left: 12.5%;
}
.projekt-film-text {
display: flex;
width: 80%;
justify-content: center;
align-items: center;
text-align: justify;
margin: 3vh 0 0 5%;
font-size: 1.25vw;
}

#film-1 {
grid-area: film-1;
margin-top: 30vh;
}
#film-houyi {
grid-area: film-houyi;
margin-left: 12.5%;
}
#text-houyi {
grid-area: text-houyi;
align-items: start;
margin-top: 2vh;
}
#film-2 {
grid-area: film-2;
margin-top: 12.5vh;
}
#film-schneemann {
grid-area: film-schneemann;
margin-left: 5%;
margin-bottom: 7.5vh;
}
#text-schneemann {
grid-area: text-schneemann;
margin-bottom: 7.5vh;
margin-left: 12.5%;
align-items: start;
margin-top: 2vh;
}
}