/* --------------------------------- */
/*          General Styling          */
/* --------------------------------- */

/* ------------------------------------ */
/*          Responsive Styling          */
/* ------------------------------------ */
@media screen and (max-width: 400px) {
    .side-by-side-right .info-div {
        margin: 0px 20px;
    }
}
@media screen and (min-width: 400px) and (max-width: 600px) {
    .side-by-side-right .info-div {
        margin: 0px 30px;
    }
}
@media screen and (min-width: 600px) and (max-width: 850px) {
    .side-by-side-right .info-div {
        max-width: 490px;
        margin: 0px auto;
    }
}
@media screen and (min-width: 850px) and (max-width: 1100px) {
    .side-by-side-right .info-div {
        max-width: 710px;
        margin: 0px auto;
    }
}
@media screen and (max-width: 1100px) {
    .side-by-side-right {
        margin: 150px 0px;
        display: flex;
        flex-flow: column;
        max-width: none;
        gap: 50px;
    }
    .side-by-side-right .mask-div {
        aspect-ratio: 3 / 2;
        width: 100%;
        overflow: hidden;
    }
    .side-by-side-right .mask-div img {
        display: block;
        width: 100%;
    }
}
@media screen and (min-width: 1100px) {
    .side-by-side-right {
        max-width: none;
        margin: 150px 0px;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 50px;
        align-items: center;
    }
    .side-by-side-right .mask-div {
        aspect-ratio: 3 / 2;
        width: 100%;
        clip-path: polygon(0% 100%, 0% 0%, 100% 0%, 78.6666% 100%);
        overflow: hidden;
    }
    .side-by-side-right .mask-div img, .side-by-side-right .mask-div .achtergrondkleur {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
}
@media screen and (min-width: 1100px) and (max-width: 1300px) {
    .side-by-side-right .info-div {
        display: flex;
        flex-flow: row;
        justify-content: left;
        margin-right: 50px;
    }
}
@media screen and (min-width: 1300px) and (max-width: 1500px) {
    .side-by-side-right .info-div {
        width: 100%;
        display: flex;
        flex-flow: row;
        justify-content: left;
        margin-left: 0px;
    }
    .side-by-side-right .info-div > div {
        width: 575px;
    }
}
@media screen and (min-width: 1500px) {
    .side-by-side-right .info-div {
        width: 100%;
        display: flex;
        flex-flow: row;
        justify-content: left;
    }
    .side-by-side-right .info-div > div {
        width: 625px;
    }
}