@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;600;700&display=swap');

:root {
    --h1: 76px;
    --h2: 56px;
    --h3: 42px;
    --h4: 28px;
    --h5: 26px;
    --h6: 22px;
    --standaard: 18px;

    --red: #f44749;
    --yellow: #f3af24;
    --gray: #F9F9F9;
    --blue: #0dcaf0;
}

body {
    font-size: var(--standaard);
    font-family: montserrat;
    background-color: var(--gray);
}

h1 {    font-size: var(--h1);   }
h2 {    font-size: var(--h2);   }
h3 {    font-size: var(--h3);   }
h4 {    font-size: var(--h4);   }
h5 {    font-size: var(--h5);   }
h6 {    font-size: var(--h6);   }

.Nieuws-Events {
    max-width: 1400px;
    margin: 0 auto;
    text-align: center;
    height: 1000px;
}

.Nieuws-Events > .container {
    height: auto;
}

.Nieuws-Events > h2 {
    margin-bottom: 20px;
    margin-top: 40px;
}

.img2,
.img1 {
    background-size: cover;
    background-position: center;
    position: relative;
    width: 45%;
    height: 350px;
    overflow: hidden
}

.img1{background-image: url("../images/news/pablo-merchan-montes-Orz90t6o0e4-unsplash.jpg");}
.img2{background-image: url(../images/news/stefan-johnson-xIFbDeGcy44-unsplash.jpg);}

.Nieuws-Events > .container > .img {
    display: flex;
    justify-content: space-between;
}

.label {
    background-color: var(--red);
    color: white;
    padding: 5px 10px;
    position: absolute;
    bottom: 60px;
    left: 20px;
    border-radius: 5px;
    font-size: 0.9rem;
}

.tekst {
    bottom: 10px;
    left: 20px;
    position: absolute;
    font-weight: bold;
    color: white;
    font-size: var(--h4);
}

.image3,
.image4,
.image5 {
    margin-top: 40px;
    background-size: cover;
    background-position: center;
    position: relative;
    width: 420px;
    height: 250px;
    overflow: hidden
}

.image3{background-image: url("../images/news/gilles-lambert-S_LhjpfIdm4-unsplash.jpg");}
.image4{background-image: url("../images/news/caroline-attwood-bpPTlXWTOvg-unsplash.jpg");}
.image5{background-image: url("../images/news/louis-hansel-GiIiRV0FjwU-unsplash.jpg");}

.promoties {
    margin-top: 20px;
    background-color: var(--blue);
    color: white;
    padding: 5px 10px;
    position: absolute;
    border-radius: 5px;
    font-size: 0.9rem;
    margin-right: 40px;
}

.datum {
    margin-top: 20px;
    padding: 5px 10px;
    position: absolute;
    border-radius: 5px;
    margin-left: 100px;
    font-weight: 600;
    font-size: var(--standaard);
}

.tekstnieuws {
    position: absolute;
    margin-top: 60px;
    font-weight: 600;
    font-size: var(--h6);
}

.Nieuw {
    margin-top: 20px;
    background-color: black;
    color: white;
    padding: 5px 10px;
    position: absolute;
    border-radius: 5px;
    font-size: 0.9rem;
    margin-right: 40px;
}

.promotie {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.image5 {
    margin-top: 40px;
    background-size: cover;
    background-position: center;
    position: relative;
    width: 420px;
    height: 250px;
    overflow: hidden
}

/* Media query voor schermen met een maximale breedte van 768px */
@media (max-width: 768px) {
    /* Nieuws & Events sectie aanpassingen */
    .Nieuws-Events {
        height: auto; /* Hoogte aanpassen naar automatisch */
        padding: 10px; /* Padding verkleinen */
    }

    .Nieuws-Events > h2 {
        margin-top: 10px; /* Marge boven de titel verkleinen */
        margin-bottom: 5px; /* Marge onder de titel verkleinen */
    }

    .Nieuws-Events > .container > .img {
        flex-direction: column; /* Afbeeldingen onder elkaar plaatsen */
    }

    .Nieuws-Events > .container > .img .img1,
    .Nieuws-Events > .container > .img .img2 {
        width: 100%; /* Volledige breedte gebruiken */
        margin-bottom: 10px; /* Ruimte tussen de afbeeldingen verkleinen */
    }

    .Nieuws-Events > .container > .promotie {
        flex-direction: column; /* Promotie-items onder elkaar plaatsen */
    }

    .Nieuws-Events > .container > .promotie .img3,
    .Nieuws-Events > .container > .promotie .img4,
    .Nieuws-Events > .container > .promotie .img5 {
        width: 100%; /* Volledige breedte gebruiken */
        margin-bottom: 10px; /* Ruimte tussen de afbeeldingen verkleinen */
    }

    .Nieuws-Events > .container > .promotie .image3,
    .Nieuws-Events > .container > .promotie .image4,
    .Nieuws-Events > .container > .promotie .image5 {
        width: 100%; /* Volledige breedte gebruiken */
        height: 180px; /* Hoogte iets verkleinen */
    }

    .Nieuws-Events > .container > .promotie .promoties,
    .Nieuws-Events > .container > .promotie .Nieuw,
    .Nieuws-Events > .container > .promotie .datum {
        position: static; /* Labels en datums onder de afbeelding plaatsen */
        margin: 5px 0; /* Ruimte verkleinen */
    }

    .Nieuws-Events > .container > .promotie .tekstnieuws {
        position: static; /* Tekst onder de afbeelding plaatsen */
        margin: 5px 0; /* Ruimte verkleinen */
    }
}

/* Media query voor schermen met een maximale breedte van 425px */
@media (max-width: 425px) {
    /* Nieuws & Events sectie aanpassingen */
    .Nieuws-Events {
        height: auto; /* Hoogte aanpassen naar automatisch */
        padding: 10px; /* Kleinere padding */
    }

    .Nieuws-Events > h2 {
        margin-top: 10px; /* Marge boven de titel verkleinen */
        margin-bottom: 5px; /* Marge onder de titel verkleinen */
        font-size: var(--h4); /* Kleinere titelgrootte */
    }

    .Nieuws-Events > .container > .img {
        flex-direction: column; /* Afbeeldingen onder elkaar plaatsen */
    }

    .Nieuws-Events > .container > .img .img1,
    .Nieuws-Events > .container > .img .img2 {
        width: 100%; /* Volledige breedte gebruiken */
        height: 200px; /* Kleinere hoogte voor afbeeldingen */
        margin-bottom: 10px; /* Ruimte tussen de afbeeldingen verkleinen */
    }

    .Nieuws-Events > .container > .promotie {
        flex-direction: column; /* Promotie-items onder elkaar plaatsen */
    }

    .Nieuws-Events > .container > .promotie .image3,
    .Nieuws-Events > .container > .promotie .image4,
    .Nieuws-Events > .container > .promotie .image5 {
        width: 100%; /* Volledige breedte gebruiken */
        height: 150px; /* Kleinere hoogte voor afbeeldingen */
        margin-bottom: 10px; /* Ruimte tussen de afbeeldingen verkleinen */
    }

    .Nieuws-Events > .container > .promotie .promoties,
    .Nieuws-Events > .container > .promotie .Nieuw,
    .Nieuws-Events > .container > .promotie .datum {
        position: static; /* Labels en datums onder de afbeelding plaatsen */
        margin: 5px 0; /* Ruimte verkleinen */
        font-size: 14px; /* Kleinere tekstgrootte */
    }

    .Nieuws-Events > .container > .promotie .tekstnieuws {
        position: static; /* Tekst onder de afbeelding plaatsen */
        margin: 5px 0; /* Ruimte verkleinen */
        font-size: 16px; /* Kleinere tekstgrootte */
    }

    .label {
        font-size: 12px; /* Kleinere tekstgrootte voor labels */
        bottom: 50px; /* Positie aanpassen */
        left: 10px; /* Positie aanpassen */
    }

    .tekst {
        font-size: var(--h5); /* Kleinere tekstgrootte voor titels */
        bottom: 10px; /* Positie aanpassen */
        left: 10px; /* Positie aanpassen */
    }

    /* Promoties en datums */
    .promoties,
    .Nieuw,
    .datum {
        font-size: 12px; /* Kleinere tekstgrootte */
    }

    .tekstnieuws {
        font-size: 14px; /* Kleinere tekstgrootte */
    }
}