.dynamic-media-text {
    /* margin-top: 1rem; */
    /* margin-bottom: 1rem; */
    min-height: 200px;
    background: var(--light);
}
.dynamic-media-text.bg-white {
    background: #fff;
}
.dynamic-media-text:first-child {
    /* margin-top: 1rem; */
    margin-top: 0;
}
.dynamic-media-text:last-child {
    margin-bottom: 5rem;
}
.wp-block-group .dynamic-media-text {
    margin-bottom: 0;
}
.wp-block-group:nth-of-type(even) .dynamic-media-text {
    background: #fff;
}
.dynamic-media-text:nth-child(odd) {
    /* clip-path: polygon(0 0, 100% 6%, 100% 94%, 0 100%); */
    clip-path: polygon(0 0, 100% 40px, 100% calc(100% - 40px), 0 100%);
}
.dynamic-media-text:nth-child(even) {
    /* clip-path: polygon(0 6%, 100% 0%, 100% 100%, 0 94%); */
    clip-path: polygon(0 40px, 100% 0%, 100% 100%, 0 calc(100% - 40px));
}
.dynamic-media-text .content-container,
.dynamic-media-text{
    display: flex;
    justify-content: space-between;
}

.dynamic-media-text > div {
    width: 50%;
}
.dynamic-media-text .text-block {
    margin: 4rem 0;
    padding: 4rem 0;
    height: fit-content;
    width: 700px;
    max-width: 45%;
    display: flex;
    flex-direction: column;
}
.dynamic-media-text .text-block h3,
.dynamic-media-text .text-block p {
    width: 80%;
    margin-left: 0;
    margin-right: 0;
}
.dynamic-media-text.content-left .text-block h3,
.dynamic-media-text.content-left .text-block p {
    /* margin-left: auto; */
}
.dynamic-media-text.white.img-full .text-block {
    background-color: var(--geel);
}
.dynamic-media-text .image-block {
    background-size: cover;
    background-position: center;
    min-height: 300px;
}
.dynamic-media-text .image-block img {
    display: block;
    height: 100%;
    object-fit: cover;
}

.dynamic-media-text .content-container {
    max-width: 1400px;
    width: 90%;
    margin: 0 auto;
}



/* block styling specific */
/* content position */
.dynamic-media-text.img-full.content-right .content-container,
.dynamic-media-text.content-right:not(.img-full) {
    /* justify-content: right; */
    justify-content: flex-end;
}
.dynamic-media-text.content-right .text-block {
    text-align: left;
    align-items: start;
    margin-left: auto;
}
.dynamic-media-text.content-left {
    justify-content: flex-end;
    /* justify-content: space-between; */
    text-align: right;
    flex-direction: row-reverse;   
}
.dynamic-media-text.content-left .text-block {
    align-items: end;
}
.dynamic-media-text.img-full.content-right .text-block{
    text-align: right;
    transform: translateX(4rem);
    align-items: flex-end;
}
.dynamic-media-text.img-full.content-left .text-block{
    text-align: left;
    transform: translateX(-4rem);
    align-items: flex-start;
    background: var(--blauw);
    color: var(--wit);
}
/* full background image */
.dynamic-media-text.img-full {
    background-size: cover;
    background-position: center;
}
.dynamic-media-text.img-full .text-block {
    background-color: var(--light);
    padding: 4rem;
    margin: 6rem 0;
}
.dynamic-media-text.img-full.bg-white .text-block {
    background: #fff;
}
.dynamic-media-text.img-full .text-block h3,
.dynamic-media-text.img-full .text-block p {
    width: auto;
}
.dynamic-media-text:nth-child(odd).img-full .text-block {
    clip-path: polygon(0 0, 100% 20px, 100% calc(100% - 20px), 0 100%);
}
.dynamic-media-text:nth-child(even).img-full .text-block {
    clip-path: polygon(0 20px, 100% 0%, 100% 100%, 0 calc(100% - 20px));
}


/* flipped block */
.dynamic-media-text.flip {
    transform: scaleX(-1);
}
.dynamic-media-text.img-full.flip .content-container {
    transform: scaleX(-1);
}
.dynamic-media-text.flip:not(.img-full) .text-block {
    transform: scaleX(-1);
    text-align: left;
}
.dynamic-media-text.flip.content-left:not(.img-full) .text-block h3,
.dynamic-media-text.flip.content-left:not(.img-full) .text-block p {
    margin-right: auto;
    margin-left: 0;
}
.dynamic-media-text.flip.content-right:not(.img-full) .text-block {
    text-align: right;
}
.dynamic-media-text.flip.content-right:not(.img-full) .text-block h3,
.dynamic-media-text.flip.content-right:not(.img-full) .text-block p {
    margin-left: auto;
    margin-right: 0;
}
.dynamic-media-text:nth-child(odd).img-full.flip .text-block {
    clip-path: polygon(0 20px, 100% 0%, 100% 100%, 0 calc(100% - 20px));
}
.dynamic-media-text:nth-child(even).img-full.flip .text-block {
    clip-path: polygon(0 0, 100% 20px, 100% calc(100% - 20px), 0 100%);
}


/* RESPONSIVE */
@media (max-width:1500px) {
    .dynamic-media-text.img-full.content-right .text-block,
    .dynamic-media-text.img-full.content-left .text-block{
        transform: translateX(0px);
        max-width: 45%;
        padding-left: 5%;
        padding-right: 5%;
        margin: 10% 0;
    }
    .dynamic-media-text.content-right:not(.img-full) .text-block,
    .dynamic-media-text.content-left:not(.img-full) .text-block {
        max-width: 45%;
    }
}
@media (max-width:1400px) {
    .dynamic-media-text .content-container {
        width: 100%;
    }
}

@media (max-width:550px) {
    .dynamic-media-text {
        margin-bottom: 0;
    }
    .dynamic-media-text.img-full.content-right .text-block,
    .dynamic-media-text.img-full.content-left .text-block{
        max-width: 90%;
        margin: 10% auto;
        text-align: center;
        align-items: center;
    }

    .dynamic-media-text:not(.img-full) {
        flex-direction: column-reverse;
    }
    .dynamic-media-text:not(.img-full) .image-block {
        width: 100%;
    }
    .dynamic-media-text:not(.img-full) .text-block p,
    .dynamic-media-text:not(.img-full) .text-block h3 {
        width: 100%;
        margin: 0 auto;
    }
    .dynamic-media-text:not(.img-full) .text-block h3 {
        margin-bottom: .5em;
    }
    .dynamic-media-text.content-right:not(.img-full) .text-block,
    .dynamic-media-text.content-left:not(.img-full) .text-block {
        max-width: 90%;
        margin: 0 auto;
        margin-top: 1rem;
        text-align: center;
    }

    .dynamic-media-text.flip {
        transform: scaleX(1);
    }
    .dynamic-media-text.img-full.flip .content-container {
        transform: scaleX(1);
    }
    .dynamic-media-text:nth-child(odd).img-full.flip .text-block {
        text-align: left;
        clip-path: polygon(0 0, 100% 40px, 100% calc(100% - 40px), 0 100%);
    }
    .dynamic-media-text:nth-child(even).img-full.flip .text-block {

        clip-path: polygon(0 40px, 100% 0%, 100% 100%, 0 calc(100% - 40px));
    }
}