:root {
    --columns-width: 24.5vw 24.5vw 24.5vw;
    --articleImg-Height: 14vw;
    --gaps: 0.75vw;
    --h2-minus: 0.35vw;
}

@media screen and (max-width: 550px) {
    :root {
        --columns-width: 99vw;
    }
}

@media screen and (min-width: 550px) and (max-width: 750px) {
    :root {
        --columns-width: 49vw 49vw;
        --gaps: 1vw;
    }
}

@media screen and (min-width: 750px) and (max-width: 975px) {
    :root {
        --columns-width: 44.5vw 44.5vw;
        --gaps: 1vw;
    }
}

@media screen and (min-width: 2500px) {
    :root {
        --columns-width: 18vw 18vw 18vw 18vw;
    }
}

@media screen and (min-width: 2500px) and (max-width: 4500px) {
    :root {
        --h2-minus: 0.6vw;
    }
}

.container {
    padding-bottom: var(--mp7);
}

#events,
#eventImgs {
    display: grid;
    grid-template-columns: var(--columns-width);
    column-gap: var(--gaps);
    row-gap: var(--gaps);
    padding-top: var(--mp7);
}

.eventData h1 {
    font-size: calc(var(--h1-fontsize)*0.8);
    line-height: calc(var(--h1-fontsize)*1.2);
}

h2 {
    font-size: calc(var(--h2-fontsize) - var(--h2-minus));
}

iframe {
    aspect-ratio: 16/9;
}

.banderol,
search>button {
    padding: var(--mp4) var(--mp5);
}