@media screen and (min-width: 768px) {
    main {
        grid-template-areas:
            ". tekst ."
            ". foto ."
            ". kaart .";
    }
}
.tekst-container {
    border-block-end: var(--border-style-1);
}
@media screen and (min-width: 768px) {
    .tekst-container {
        display: grid;
        grid-area: tekst;
        grid-gap: var(--gap-style);
        grid-template-columns: repeat(2, 1fr);
    }
}
.foto-container {
	background-color: transparent;
	justify-content: center;
    margin: 0;
    padding: var(--gap-style) 0;
}
iframe {
    inline-size: 100%;
    block-size: auto;
    object-fit: cover;
    border-style: none;
}
@media screen and (min-width: 768px) {
    .foto-container {
        display: grid;
        grid-area: foto;
        grid-auto-flow: row;
        grid-template-columns: repeat(6, 1fr);
        grid-template-areas:
            "A A B B C C"
            "D D D E E E";
        grid-gap: var(--gap-style);
        }
    .foto:nth-child(1) {
        grid-area: A;
    }
    .foto:nth-child(2) {
        grid-area: B;
    }
    .foto:nth-child(3) {
        grid-area: C;
    }
    .foto:nth-child(4) {
        grid-area: D;
    }
    .foto:nth-child(5) {
        grid-area: E;
    }
}
@media screen and (min-width: 1024px) {
    .foto-container {
        grid-template-columns: repeat(5, 1fr);
        grid-template-areas:
            "A B C D E"
	}
}
.card-container {
    justify-content: center;
    margin: 0;
    border-block-start: var(--border-style-1);
    padding: var(--gap-style) 0;
}
@media screen and (min-width: 768px) {
    .card-container {
        display: grid;
        grid-area: kaart;
        grid-auto-flow: row;
        grid-gap: var(--gap-style);
    }
}
@media screen and (min-width: 1024px) {
    .card-container {
        grid-template-columns: repeat(3, 1fr);
	}
 }
.card {
    display: flex;
    align-items: flex-start;
    flex-flow: column;
    border: 0.75rem solid var(--hd-ft-bg-color);
    background-color: var(--hd-ft-bg-color);
}
@media screen and (max-width: 768px) {
    .card:nth-child(2) {
        margin: var(--gap-style) 0
    }
}
@media screen and (min-width: 768px) and (max-width: 1023px) {
    .card img {
        inline-size: 500px;
    }
    .card p {
        flex: 1;
        margin: 0;
        padding: 0;
    }
    .card:nth-child(1),
    .card:nth-child(3) {
        flex-flow: row;
    }
    .card:nth-child(1)  p,
    .card:nth-child(3)  p {
        padding-inline-start: var(--gap-style);
    }
    .card:nth-child(2) {
        flex-flow: row-reverse;
    }
    .card:nth-child(2)  p {
        padding-inline-end: var(--gap-style);
    }
}