html {
    box-sizing: border-box;
}

*,
::after,
::before {
    box-sizing: inherit;
}

:root {
    -moz-tab-size: 4;
    tab-size: 4;
}

html {
    line-height: 1.15;
}

body {
    margin: 0;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
    "Segoe UI Symbol";
}

h1 {
    font-size: 2em;
    margin: 0.67em 0;
}

hr {
    height: 0;
}

abbr[title] {
    text-decoration: underline dotted;
}

b,
strong {
    font-weight: bolder;
}

code,
kbd,
pre,
samp {
    font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace;
    font-size: 1em;
}

small {
    font-size: 80%;
}

sub,
sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
}

sub {
    bottom: -0.25em;
}

sup {
    top: -0.5em;
}

button,
input,
optgroup,
select,
textarea {
    font-family: inherit;
    font-size: 100%;
    line-height: 1.15;
    margin: 0;
}

button,
select {
    text-transform: none;
}

[type="button"],
[type="reset"],
[type="submit"],
button {
    -webkit-appearance: button;
    appearance: button;
}

[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner,
button::-moz-focus-inner {
    border-style: none;
    padding: 0;
}

[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring,
button:-moz-focusring {
    outline: 1px dotted ButtonText;
}

fieldset {
    padding: 0.35em 0.75em 0.625em;
}

legend {
    padding: 0;
}

progress {
    vertical-align: baseline;
}

[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
    height: auto;
}

[type="search"] {
    -webkit-appearance: textfield;
    appearance: textfield;
    outline-offset: -2px;
}

[type="search"]::-webkit-search-decoration {
    -webkit-appearance: none;
}

::-webkit-file-upload-button {
    -webkit-appearance: button;
    font: inherit;
}

details {
    display: block;
}

summary {
    display: list-item;
}

:root {
    /* body font size */
    --text-base-size: 1rem;
    --body-line-height: 1.5;
    --heading-line-height: 1.2;

    /* type scale */
    --text-scale-ratio: 1.2;
    --text-xs: calc((1em / var(--text-scale-ratio)) / var(--text-scale-ratio));
    --text-sm: calc(var(--text-xs) * var(--text-scale-ratio));
    --text-md: calc(var(--text-sm) * var(--text-scale-ratio) * var(--text-scale-ratio));
    --text-lg: calc(var(--text-md) * var(--text-scale-ratio));
    --text-xl: calc(var(--text-lg) * var(--text-scale-ratio));
    --text-xxl: calc(var(--text-xl) * var(--text-scale-ratio));
    --text-xxxl: calc(var(--text-xxl) * var(--text-scale-ratio));

    /* controling the spacing scale */
    --space-unit: 1rem;
    --space-xxxxs: calc(0.125 * var(--space-unit));
    --space-xxxs: calc(0.25 * var(--space-unit));
    --space-xxs: calc(0.375 * var(--space-unit));
    --space-xs: calc(0.5 * var(--space-unit));
    --space-sm: calc(0.75 * var(--space-unit));
    --space-md: calc(1.25 * var(--space-unit));
    --space-lg: calc(2 * var(--space-unit));
    --space-xl: calc(3.25 * var(--space-unit));
    --space-xxl: calc(5.25 * var(--space-unit));
    --space-xxxl: calc(8.5 * var(--space-unit));
    --space-xxxxl: calc(13.75 * var(--space-unit));
    --component-padding: var(--space-md);

    /* Line-height */
    --component-body-line-height: calc(var(--body-line-height) * var(--line-height-multiplier, 1));
    --component-heading-line-height: calc(var(--heading-line-height) * var(--line-height-multiplier, 1));
    --line-height-multiplier: 1;
    --text-vspace-multiplier: 1;

    /* Kleur setup */
    --color-primary: #1460ff;
    --color-secundary: #81ba23;
    --color-text: var(--color-contrast-high);

    --paars: hsl(233, 42%, 88%);
    --roze: hsl(326, 63%, 90%);
    --geel: hsl(53, 100%, 50%);
    --groen: hsl(93, 35%, 78%);

    /* color contrasts */
    --color-bg: white;
    --color-contrast-low: #f2f2f2;
    --color-contrast-medium: #666666;
    --color-contrast-high: #000000;

    /* feedback colors */
    --color-warning-darker: hsl(46, 100%, 41%);
    --color-warning-dark: hsl(46, 100%, 51%);
    --color-warning: hsl(46, 100%, 61%);
    --color-warning-light: hsl(46, 100%, 71%);
    --color-warning-lighter: hsl(46, 100%, 81%);

    --color-success-darker: hsl(94, 48%, 36%);
    --color-success-dark: hsl(94, 48%, 46%);
    --color-success: hsl(94, 48%, 56%);
    --color-success-light: hsl(94, 48%, 66%);
    --color-success-lighter: hsl(94, 48%, 76%);

    --color-error-darker: hsl(349, 75%, 31%);
    --color-error-dark: hsl(349, 75%, 41%);
    --color-error: hsl(349, 75%, 51%);
    --color-error-light: hsl(349, 75%, 61%);
    --color-error-lighter: hsl(349, 75%, 71%);

    /* font stack */
    --text: "Poppins", Helvetica, Arial, sans-serif;
    --header: "Poppins-bold", Helvetica, Arial, sans-serif;
    --text-bold: var(--header);

    /* van alles en nog wat */
    --var-width: min(80ch, 100vw - 2rem);
}

:root {
    accent-color: var(--color-primary);
}

:focus {
    outline: none;
}

:focus-visible {
    outline: 2px solid var(--color-primary);
}

::selection {
    background-color: var(--groen);
}

::marker {
    color: var(--color-primary);
}

:is(::-webkit-calendar-picker-indicator, ::-webkit-clear-button, ::-webkit-inner-spin-button, ::-webkit-outer-spin-button) {
    color: var(--color-primary);
}

/* font */
@font-face {
    font-family: "Poppins-bold";
    font-style: normal;
    font-weight: 700;
    src: local(""), url("../fonts/Poppins-Bold.woff2") format("woff2");
    /* Super Modern Browsers */
    /*url('../fonts/AtkinsonHyperlegible-Regular.woff2') format('woff');*/
    /* Modern Browsers */
    font-display: swap;
}

@font-face {
    font-family: "Poppins";
    font-style: normal;
    font-weight: 400;
    src: local(""), url("../fonts/Poppins-Regular.woff2") format("woff2");
    /*  !* Super Modern Browsers *!*/
    /*  url('../fonts/AtkinsonHyperlegible-Bold.woff2') format('woff');*/
    /* Modern Browsers */
    font-display: swap;
}

/* Other stuff */
[id] {
    scroll-margin-top: 2em;
}

/*
main img {
  content-visibility: auto;
}
*/

a,
button {
    touch-action: manipulation;
}

input[type="submit"] {
    cursor: pointer;
}

/* prevent zoom on ios */
input {
    font-size: max(16px, 1rem);
}

@media (prefers-reduced-motion: reduce) {
    #sidenav-open {
        --duration: 1ms;
    }

    .overlay {
        display: none;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

@media (prefers-reduced-motion: no-preference) {
    html {
        scroll-behavior: smooth;
    }

    :focus {
        transition: outline-offset 0.25s ease;
        outline-offset: 5px;
        /* https://twitter.com/argyleink/status/1387072095159406596?s=03 */
    }

    /* effect */
    @keyframes square-out-bottom-right {
        from {
            clip-path: inset(0 0 0 0);
        }

        to {
            clip-path: inset(100% 0 0 100%);
        }
    }

    [transition-style="out:square:bottom-right"] {
        animation: 2.5s cubic-bezier(0.25, 1, 0.3, 1) square-out-bottom-right both;
    }
}

@media (prefers-reduced-data: reduce) {
    img,
    video {
        display: none;
    }
}

.container {
    width: min(80ch, 100vw - 2rem);
}

/* Text setup */

figure,
h1,
h2,
h3,
h4 {
    margin: 0;
    color: var(--color-text);
    font-family: var(--header);
}

h1 {
    font-size: clamp(1.5rem, 2.5vw, 2.5rem);
}

h2 {
    font-size: clamp(1.5rem, 2.1vw, 2.5rem);
}

h3 {
    font-size: clamp(1.3rem, 1.5vw, 2rem);
}

p,
ul,
ol,
label,
p > a,
table,
.more-info-link {
    line-height: var(--body-line-height);
    color: var(--color-text);
    max-inline-size: 70ch;
    font-family: var(--text);
    font-size: clamp(1rem, 1rem + 0.2vw, 1.25rem);
}

p:first-of-type {
    margin-block-start: 0;
}

p:last-of-type {
    margin-block-end: 0;
}

p > a {
    color: var(--color-primary);
}

b,
strong {
    font-family: var(--header);
}

.logo svg path {
    transition: fill 0.4s var(--ease-elastic-2);
    -webkit-transition: fill 0.4s ease;
    -moz-transition: fill 0.4s ease;
    -ms-transition: fill 0.4s ease;
    -o-transition: fill 0.4s ease;
}

.logo svg path {
    fill: #1460ff;
}

.logo:hover path {
    fill: var(--groen);
}

/* contentblocks story */

.pink-title {
    color: var(--color-contrast-high);
    padding: 1em;
    text-decoration-line: underline;
    text-decoration-color: var(--color-primary);
}

.blue-title {
    color: var(--color-contrast-low);
    padding: 1em;
    text-decoration-line: underline;
    text-decoration-color: var(--roze);
}

.header1 {
    overflow: visible;
    display: grid;
}

.header1 > img {
    max-height: 300px;
    object-fit: cover;
}

.blue-figcaption {
    padding: 1em;
    background-color: var(--color-primary);
    z-index: 1;
}

.pink-figcaption {
    padding: 1em;
    background-color: var(--roze);
    z-index: 1;
}

.header2 {
    display: flex;
    flex-direction: column;
}

.header-img-right {
    display: flex;
    flex-direction: column;
    height: auto;
}

.header-img-left {
    display: flex;
    flex-direction: column;
    height: auto;
}

@media screen and (min-width: 900px) {
    .header2,
    .header-img-left {
        flex-direction: row;
    }

    .header-img-right {
        flex-direction: row-reverse;
    }
}


.header-img {
    display: flex;
    flex: 2;
}

.header-text {
    display: flex;
    flex-direction: column;
    flex: 3;
    padding: 1em;
    justify-content: center;
}

h1.blue-title,
h1.pink-title {
    padding: 0;
}

.header-text.blue > figcaption > .blue > p,
.header-text.pink > figcaption > .pink > p,
.header-intro-text.blue > p,
.header-intro-text.pink > p {
    font-family: var(--text);
    font-style: italic;
    font-size: calc(80% + 0.4vw);
}

.pink {
    color: var(--color-contrast-high);
    background-color: var(--roze);
}

.pink > p {
    color: var(--color-contrast-high);
    background-color: var(--roze);
}

.blue {
    color: var(--color-contrast-low);
    background-color: var(--color-primary);
}

.blue > p {
    color: var(--color-contrast-low);
    background-color: var(--color-primary);
}

.header3 > .blue,
.header3 > .pink {
    padding-top: 1em;
}

.header-big-img {
    display: flex;
    flex: 3;
}

.header-big-img > figure {
    width: 100%;
}

.header-big-title {
    display: flex;
    flex-direction: column;
    flex: 2;
    justify-content: center;
    text-align: center;
    padding: 1em;
}

.header-intro-text {
    margin-top: -1.2em;
    z-index: 1;
    padding: 1em;
}

@media screen and (min-width: 900px) {

    .header-img,
    .header-text {
        flex: 1;
    }

    .header-intro-text {
        max-inline-size: 100%;
    }
}

/* Blockquotes */

blockquote,
.blockquote-story1,
.blockquote-story2,
.blockquote-story3,
.blockquote-story4 {
    text-align: center;
    margin-top: 1em;
    padding-top: 1em;
}

blockquote > p {
    padding: 0 1em;
    font-family: var(--header);
    font-size: calc(100% + 0.4vw);
}

.blockquote-story1 > .blue,
.blockquote-story2 > .blue,
.blockquote-story3 > .blue,
.blockquote-story4 > .blue {
    padding: 1em;
}

.blockquote-story1 > p::before,
.blue-text > p::before {
    content: url("../img/PinkQuote.svg");
    margin-left: -1em;
    margin-top: -1.85em;
    position: absolute;
    z-index: -1;
}

.blue-text {
    color: var(--color-primary);
}

.pink-text {
    color: var(--roze);
}

.blockquote-story2 > .blue-text {
    margin-top: 1em;
}

.blockquote-story2 > .blue-text::before,
.blockquote-story2 > .pink-text::before {
    content: url("../img/YellowQuote.svg");
    margin-left: -1em;
    margin-top: -1.8em;
    position: absolute;
    z-index: -1;
}

.blockquote-story2 > .blue::before {
    content: url("../img/YellowQuote.svg");
    margin-left: -2em;
    margin-top: -1.75em;
    position: absolute;
}

.blockquote-story3 {
    border-bottom: 5px solid var(--geel);
}

.blockquote-story4 {
    border-left: 5px solid var(--color-primary);
}

@media screen and (max-width: 1228px) {
    .story article {
        width: unset;
    }
}

.story aside {
    display: flex;
    flex-direction: column;
}

/* highlight text */

.highlight {
    padding: 1em;
}

.blue-highlight > p {
    color: var(--color-primary);
}

.pink-highlight > p {
    color: var(--roze);
}

.pink-revert-text > p {
    color: var(--color-primary);
}

.blue-revert-text > p {
    color: var(--roze);
}

.blue-revert-text p > a {
    color: var(--roze);
}

/* images blocks */

.figure-text {
    overflow: visible;
    display: grid;
}

.figure-text > img {
    max-height: 300px;
    align-self: center;
    object-fit: cover;
    aspect-ratio: 4/3;
}

.figcaption-text {
    display: flex;
    justify-content: center;
    position: relative;
    margin-top: -2em;
}

.figcaption-text.image_right {
    margin-top: unset;
    margin-bottom: -2rem;
    z-index: 111;
}

.caption-text {
    padding: 1em;
    display: flex;
    justify-content: center;
    width: 80%;
    flex-direction: column;
}

.figcaption-text > .pink-revert-text,
.figcaption-text > .blue-revert-text {
    font-size: calc(80% + 0.4vw);
}

.pink-revert-text {
    background-color: var(--roze);
    color: var(--color-primary);
}

.blue-revert-text {
    background-color: var(--color-primary);
    color: var(--roze);
}

.blue-revert-text a {
    color: var(--roze);
}

@media screen and (min-width: 900px) {
    .figure-text {
        display: flex;
        flex-direction: row;
    }

    .figure-text > img {
        display: flex;
        flex: 3;
    }

    .figure-text > img.one_one {
        flex: 2;
    }

    .figure-text > img.two_one {
        flex: 1;
    }

    .figure-text > img.image_right {
        margin-left: -2em;
        z-index: -1;
    }

    .figcaption-text {
        flex: 2;
        position: relative;
        margin-left: -2em;
        flex-wrap: wrap;
        align-content: center;
        margin-top: 0;
    }

    .figcaption-text.image_right {
        margin-left: 0;
        margin-bottom: unset;
    }

    .caption-text {
        width: auto;
    }

    .caption-text.pink-revert-text,
    .caption-text.blue-revert-text {
        font-family: var(--text);
        width: -webkit-fill-available;
    }
}

.one-figure > img {
    object-fit: cover;
}

.two-figure {
    max-height: 300px;
    width: 80%;
    object-fit: cover;
}

.two-figure-right {
    float: right;
    margin-top: -6em;
    object-fit: cover;
}

.two-figure-right > img,
.two-figure-left > img {
    aspect-ratio: 4/3;
    object-fit: cover;
}

.two-figure-left {
    float: left;
    object-fit: cover;
}

@media screen and (min-width: 900px) {
    .two-figure-box {
        display: flex;
        flex-direction: row;
        gap: 1em;
    }

    .two-figure-right {
        margin-top: 0;
    }
}

.three-figure {
    display: flex;
    flex-direction: row;
}

.three-figure-left {
    display: flex;
    flex-direction: column;
    gap: 1em;
    flex: 1;
}

.three-figure-left > figure > img {
    aspect-ratio: 4/3;
    object-fit: cover;
}

.three-figure-right {
    display: flex;
    flex: 1;
    align-content: center;
    flex-wrap: wrap;
    position: relative;
    margin-left: -3em;
}

.three-figure-right > img {
    height: 90%;
    object-fit: cover;
}

@media screen and (min-width: 900px) {
    .three-figure {
        gap: 1em;
    }

    .three-figure-left {
        flex-direction: row;
        flex: 2;
    }

    .three-figure-right {
        margin-left: 0;
    }

    .three-figure-right > img {
        height: 100%;
    }
}

.three-figure-column {
    display: flex;
    flex-direction: column;
    max-height: 500px;
}

.three-figure-column > figure:nth-child(odd) {
    display: flex;
    justify-content: flex-start;
}

.three-figure-column > figure:nth-child(even) {
    display: flex;
    justify-content: flex-end;
    position: relative;
    margin: -3em 0;
    z-index: 1;
}

.three-figure-column > figure > img {
    width: 80%;
    object-fit: cover;
    aspect-ratio: 4/3;
}

/* more info buttons */

.more-info {
    text-align: center;
    text-transform: uppercase;
    border: none;
    padding: 0;
}

.more-info-link {
    padding: 1em;
    display: inline-block;
    width: 100%;
}

.more-info1 {
    background-color: var(--color-primary);
    color: var(--geel);
    text-decoration-line: underline;
    text-decoration-color: var(--roze);
    text-decoration-thickness: 5px;
}

.more-info1:hover {
    background-color: var(--geel);
    color: var(--color-primary);
    text-decoration-color: var(--roze);
}

.more-info2 {
    color: var(--color-primary);
    text-decoration-line: underline;
    text-decoration-color: var(--roze);
    text-decoration-thickness: 5px;
    background-color: white;
}

.more-info2:hover {
    background-color: var(--roze);
    color: var(--color-primary);
}

.more-info3 {
    color: var(--roze);
    text-decoration-line: underline;
    text-decoration-color: var(--geel);
    text-decoration-thickness: 5px;
    border: solid 2px var(--color-primary);
    background-color: white;
}

.more-info3:hover {
    background-color: var(--color-primary);
    color: var(--roze);
}

/* buttons en links */

.button {
    --bg: var(--color-primary);
    --text: #ffffff;
    display: inline-block;
    background-color: var(--bg);
    color: var(--text);
    font-size: clamp(1.25rem, 2vw, 1.45rem);
    font-family: var(--header);
    padding: 1rem 1.5rem;
    text-decoration: none;
    text-align: center;
    transition: background-color 0.2s ease-in-out, border 0.2s ease-in;
    -webkit-transition: background-color 0.2s ease-in-out, border 0.2s ease-in;
    -moz-transition: background-color 0.2s ease-in-out, border 0.2s ease-in;
    -ms-transition: background-color 0.2s ease-in-out, border 0.2s ease-in;
    -o-transition: background-color 0.2s ease-in-out, border 0.2s ease-in;
}

.button:hover,
.button:focus {
    --bg: var(--groen);
    background-color: var(--bg);
    color: var(--color-text);
}

/* hamburger */

.hamburger {
    --size: 4rem;
    display: flex;
    align-content: center;
    justify-content: center;
    place-content: center;
    padding: 1rem;
    box-sizing: border-box;
    border-radius: 50%;
    border: 2px solid transparent;
    -webkit-margin-start: -1rem;
    margin-inline-start: -1rem;
    block-size: var(--size);
    inline-size: var(--size);
    outline: none;
    -webkit-transition: border-color 0.25s ease, background-color 0.25s ease;
    -moz-transition: border-color 0.25s ease, background-color 0.25s ease;
    -ms-transition: border-color 0.25s ease, background-color 0.25s ease;
    -o-transition: border-color 0.25s ease, background-color 0.25s ease;
    transition: border-color 0.25s ease, background-color 0.25s ease;
}

.hamburger:hover {
    border-color: var(--color-primary);
}

.hamburger:focus {
    border-color: var(--color-primary);
    background: var(--color-primary);
}

.hamburger:hover svg > line {
    stroke: var(--color-contrast-high);
}

.hamburger:active {
    background: var(--color-primary);
}

.hamburger > svg {
    width: 100%;
    stroke: var(--color-contrast-high);
}

.hamburger > svg > line {
    stroke: var(--text);
    stroke-width: 7px;
    transition: stroke 0.25s ease;
}

/* aside */

aside {
    z-index: 1001;
}

aside > a {
    outline-offset: -1px;
    outline: 1px solid transparent;
}

aside > a:focus {
    outline-color: var(--color-primary);
    -webkit-transition: outline-color 0.25s ease;
    -moz-transition: outline-color 0.25s ease;
    -ms-transition: outline-color 0.25s ease;
    -o-transition: outline-color 0.25s ease;
    transition: outline-color 0.25s ease;
}

aside h3 {
    margin-bottom: 1rem;
}

aside .event-wrapper.grid-view {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    grid-auto-rows: 200px;
}


/* Homepage */

.homepage header {
    margin-block-end: var(--space-xl);
    text-align: center;
    margin-block: var(--space-md);
}

header p {
    margin: 0 auto;
}

h1::before {
    margin-block-end: var(--space-lg);
}

h1::after {
    margin-block-start: var(--space-lg);
}

header h1 {
    margin: 0.5rem 0 4rem 0;
}

/* main */

main {
    padding: var(--space-md) var(--space-md) 0;
}

:is(.homepage) main {
    background-image: url(../img/bg.svg);
    background-repeat: no-repeat;
    background-size: 100% 80vh;
    background-position: top;
}

/* de rest */

body {
    display: grid;
    grid: [stack] 1fr / min-content [stack] 1fr;
}

@media screen and (min-width: 640px) {
    body {
        column-gap: 2rem;
    }
}

:is(:hover:not(.blue-title, .pink-title)) {
    text-decoration-style: underline;
    -moz-text-decoration-style: underline;
    text-decoration-color: currentColor;
    -moz-text-decoration-color: currentColor;
}

@media (max-width: 639px) {
    body > aside,
    body > main {
        grid-area: stack;
    }
}

/* sidenav */

#sidenav-open {
    --easeOutExpo: cubic-bezier(0.16, 1, 0.3, 1);
    --duration: 0.6s;
    display: grid;
    grid-template-columns: [nav] 2fr;
    grid-template-rows: [nav] 1fr [escape] 1fr;
    min-width: 210px;
}

@media (max-width: 639px) {
    #sidenav-open {
        position: -webkit-sticky;
        position: sticky;
        top: 0;
        max-height: 100vh;
        -ms-scroll-chaining: none;
        overscroll-behavior: contain;
        overflow-x: hidden;
        overflow-y: auto;
        /*overflow: hidden auto;*/
        visibility: hidden;
        will-change: transform;
        -webkit-transition: transform var(--duration) var(--easeOutExpo),
        visibility 0s linear var(--duration);
        -moz-transition: transform var(--duration) var(--easeOutExpo),
        visibility 0s linear var(--duration);
        -ms-transition: transform var(--duration) var(--easeOutExpo),
        visibility 0s linear var(--duration);
        -o-transition: transform var(--duration) var(--easeOutExpo),
        visibility 0s linear var(--duration);
        transition: transform var(--duration) var(--easeOutExpo),
        visibility 0s linear var(--duration);
        -webkit-transform: translateY(-110vh);
        -moz-transform: translateY(-110vh);
        -ms-transform: translateY(-110vh);
        -o-transform: translateY(-110vh);
        transform: translateY(-110vh);
    }

    #sidenav-open:target {
        visibility: visible;
        transform: translateX(0);
        -webkit-transition: transform var(--duration) var(--easeOutExpo);
        -moz-transition: transform var(--duration) var(--easeOutExpo);
        -ms-transition: transform var(--duration) var(--easeOutExpo);
        -o-transition: transform var(--duration) var(--easeOutExpo);
        transition: transform var(--duration) var(--easeOutExpo);
    }
}

aside nav {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    align-self: start;
}

aside nav.sec-nav {
    position: -webkit-sticky;
    position: sticky;
    bottom: 0;
    align-self: end;
    padding-block-end: var(--space-md);
}

.sec-nav a {
    font-family: var(--text);
    font-size: 80%;
    color: black;
}

.sec-nav img {
    max-width: 100px;
    height: auto;
}

.sec-nav p {
    font-size: clamp(0.5rem, 0.5rem + 0.2vw, 1rem);
    margin-block: var(--space-md);
}

.logo--block {
    display: grid;
    width: 100%;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: min-content min-content;
    gap: var(--space-xs);
}

.logo--block img {
    max-width: 75px;
}

.logo--block a {
    margin: auto;
}

.logo--block p {
    grid-column: 1 / -1;
    margin-block-start: 0;
}

#sidenav-button,
#sidenav-close {
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    touch-action: manipulation;
}

#sidenav-close {
    position: absolute;
    top: 2rem;
    right: 2rem;
    width: 44px;
    height: 44px;
}

#sidenav-button {
    margin-inline-start: auto;
}

@media (min-width: 640px) {
    #sidenav-button,
    #sidenav-close {
        display: none;
    }
}

nav {
    display: inline-flex;
    flex-direction: column;
    padding: 2rem 0 0 2rem;
}

nav ul {
    display: inline-flex;
    flex-direction: column;
    list-style: none;
    padding: 0;
    line-height: calc(var(--body-line-height) * 1.5);
    margin-bottom: 1rem;
    margin-top: 1rem;
}

nav a {
    font-family: var(--text-bold);
    color: black;
    text-decoration-color: transparent;
    -webkit-transition: text-decoration-color 0.2s ease-in;
    -moz-transition: text-decoration-color 0.2s ease-in;
    -ms-transition: text-decoration-color 0.2s ease-in;
    -o-transition: text-decoration-color 0.2s ease-in;
    transition: text-decoration-color 0.2s ease-in;
    -moz-text-decoration-color: transparent;
}

nav a:hover,
nav li.active a {
    color: var(--color-primary);
}

nav .search-blok,
.search .search-blok {
    display: flex;
    margin-bottom: 4rem;
    padding-block: 6px;
    border-bottom: 1px solid var(--color-primary);
    justify-content: space-between;
    /*border-radius: 25px;
    -webkit-border-radius: 25px;
    -moz-border-radius: 25px;
    -ms-border-radius: 25px;
    -o-border-radius: 25px;
    */
}

nav .search-blok {
    margin-bottom: 2rem;
}

@media screen and (max-width: 639px) {
    nav .search-blok {
        width: calc(100% - 2rem);
    }
}

nav .search-input,
.search .search-input {
    padding: 0.2rem 0 0.2rem 0;
    appearance: none;
    background-clip: padding-box;
    background-color: transparent;
    border: 0;
    border-right: none;
    color: #333;
    display: block;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    width: 6rem;
}

nav #button-zoek {
    background-color: transparent;
    border: 0;
    margin: 2px 4px 0 0;
}

@media (max-width: 639px) {
    aside {
        background-color: #ffffff;
    }

    aside nav {
        font-size: 1.5rem;
        padding-right: 2rem;
    }
}

body {
    min-block-size: 100vh;
    max-width: 1600px;
    margin-left: auto;
    margin-right: auto;
}

/* Spotlight */

.spotlight {
    display: grid;
    grid-template-columns: 1fr;
    grid-auto-rows: 300px;
    grid-auto-flow: dense;
    grid-gap: 10px;
    margin-block-start: var(--space-md);
    margin-block-end: var(--space-xxl);
}

.event {
    display: flex;
    flex-direction: column;
    position: relative;
    background-color: var(--light-green);
    align-self: stretch;
    min-height: 200px;
}

:not(.homepage--agenda) > .event figure {
    width: 100%;
    height: 100%;
    object-fit: cover;
    overflow: hidden;
}

:not(.homepage--agenda) > .event figure img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/*:has(.event:hover) .event:not(:hover) figure img {*/
/*    filter: contrast(0.3);*/
/*    -webkit-filter: contrast(0.3);*/
/*    opacity: 0.6;*/
/*}*/

/*:has(.event:hover) figure img {*/
/*    filter: contrast(0.8);*/
/*    -webkit-filter: contrast(0.8);*/
/*}*/

.event:nth-child(5n + 1),
.event:nth-child(5n + 6) {
    grid-column: span 1;
    background-color: hsl(93deg 34% 78%);
}

.event:nth-child(5n + 2) {
    grid-column: span 1;
    background-color: hsl(327deg 61% 90%);
}

.event:nth-child(5n + 3) {
    grid-column: span 1;
    background-color: hsl(53deg 100% 50%);
}

.event:nth-child(5n + 4),
.event:nth-child(5n + 5) {
    grid-column: span 1;
    background-color: hsl(233deg 42% 88%);
}

.event:nth-child(5n + 1) .label,
.event:nth-child(5n + 6) .label {
    background-color: var(--roze);
}

.event:nth-child(5n + 2) .label {
    background-color: var(--groen);
}

.event:nth-child(5n + 3) .label {
    background-color: var(--paars);
}

.event:nth-child(5n + 4) .label,
.event:nth-child(5n + 5) .label {
    background-color: var(--geel);
}

@media screen and (min-width: 910px) {
    .spotlight {
        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    }

    .event:nth-child(2),
    .event:nth-child(8),
    .event:nth-child(14),
    .event:nth-child(20),
    .event:nth-child(24),
    .event:nth-child(32) {
        grid-column: span 2;
        grid-row: span 2;
    }

    .event:nth-child(5n + 6) {
        grid-column: span 2;
        grid-row: span 1;
    }

    .spotlight .event:nth-child(5n + 6) {
        grid-column: span 1;
        grid-row: span 2;
    }

    .event:nth-child(5),
    .event:nth-child(11),
    .event:nth-child(17),
    .event:nth-child(23),
    .event:nth-child(29),
    .event:nth-child(33) {
        grid-column: span 1;
        grid-row: span 2;
    }
}

.event h2,
.event p {
    display: inline-block;
}

.label {
    display: flex;
    position: absolute;
    top: var(--space-sm);
    left: var(--space-sm);
    padding-block-start: var(--space-xs);
    padding-block-end: var(--space-xxs);
    padding-inline: var(--space-sm);
    text-transform: uppercase;
    font-family: var(--header);
    font-size: 80%;
    border-radius: 25px;
    -webkit-border-radius: 25px;
    -moz-border-radius: 25px;
    -ms-border-radius: 25px;
    -o-border-radius: 25px;
    max-width: 160px;
}

.label.verhaal:before {
    content: "";
    display: inline-flex;
    background-image: url(../img/ico-verhaal.svg);
    background-repeat: no-repeat;
    width: 17px;
    height: 14px;
    margin-inline-end: var(--space-xxs);
}

.label.podcast:before {
    content: "";
    display: inline-flex;
    background-image: url(../img/ico-podcast.svg);
    background-repeat: no-repeat;
    width: 17px;
    height: 14px;
    margin-inline-end: var(--space-xxs);
}

.label.video:before {
    content: "";
    display: inline-flex;
    background-image: url(../img/ico-video.svg);
    background-repeat: no-repeat;
    background-size: cover;
    width: 14px;
    height: 14px;
    margin-inline-end: var(--space-xxs);
}

.card-body {
    position: absolute;
    bottom: var(--space-sm);
    left: var(--space-sm);
    margin-inline-end: var(--space-sm);
}

/* Social bar */

.socialbar {
    position: relative;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
}

.socialbar:before {
    content: "";
    /*background-image: url(../img/wave-bar.svg);*/
    /*background-size: cover;*/
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    mix-blend-mode: soft-light;
}

.nieuwsbrief {
    padding-inline: var(--space-md);
    background-color: var(--color-primary);
    width: 100%;
    padding-block-start: 1rem;
}

.nieuwsbrief form {
    position: relative;
    margin-block-end: var(--space-md);
}

.cf-inline {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
    margin-block-end: var(--space-md);
}

input[type="email"] {
    padding-block: var(--space-xs);
    padding-inline: var(--space-sm);
    border: 0;
}

.nieuwsbrief input[type="email"] {
    min-width: 300px;
}

input[type="submit"] {
    background-color: white;
    border: 0;
    padding-block: var(--space-xs);
    padding-inline: var(--space-sm);
}

.nieuwsbrief h3 {
    color: white;
    margin-block-end: var(--space-sm);
}

.nieuwsbrief .form-label {
    position: absolute;
    width: 1px;
    /* Setting this to 0 make it invisible for VoiceOver */
    height: 1px;
    /* Setting this to 0 make it invisible for VoiceOver */
    padding: 0;
    margin: -1px;
    border: 0;
    clip: rect(0 0 0 0);
    overflow: hidden;
}

.socials {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding-block-start: 1rem;
    width: 100%;
    opacity: 0.95;
}

@media screen and (min-width: 769px) {
    .socialbar {
        flex-direction: row;
    }
}

.socials p {
    margin-block-end: var(--space-sm);
}

.socials ul {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: var(--space-sm);
    margin-block-end: var(--space-md);
    flex-direction: row;
}

.socials a {
    --size: 40px;

    display: block;
    width: var(--size);
    height: var(--size);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

a.facebook {
    background-image: url(../img/facebook.svg);
}

a.instagram {
    background-image: url(../img/insta.svg);
}

a.twitter {
    background-image: url(../img/twitter.svg);
}

/* Logo bar homepage */

.logo-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: var(--space-lg);
    margin-block-start: var(--space-xxl);
    margin-block-end: var(--space-md);
}

.logo-container h2 {
    display: block;
    width: 100%;
}

.logo-container .item {
    display: flex;
    align-items: center;
    overflow: hidden;
}

.logo-container img {
    width: 100%;
    max-width: 200px;
    height: auto;
}

/* Verhalen overzicht */

.stories-wrapper {
    display: grid;
    grid-template-columns: 1fr;
    grid-auto-rows: 300px;
    grid-auto-flow: dense;
    grid-gap: 10px;
    margin-block-start: var(--space-md);
    margin-block-end: var(--space-xxl);
}

.verhaal-block {
    display: flex;
    flex-direction: column;
    position: relative;
    background-color: var(--light-green);
    align-self: stretch;
    min-height: 200px;
}

.verhaal-block figure {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.verhaal-block figure img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.verhaal-block:nth-child(5n + 1),
.verhaal-block:nth-child(5n + 6) {
    grid-column: span 1;
    background-image: linear-gradient(
            0deg,
            hsl(92deg 10% 39%) 0%,
            hsl(92deg 10% 44%) 8%,
            hsl(92deg 10% 48%) 17%,
            hsl(92deg 10% 52%) 25%,
            hsl(93deg 12% 55%) 33%,
            hsl(93deg 13% 59%) 42%,
            hsl(93deg 15% 62%) 50%,
            hsl(93deg 18% 65%) 58%,
            hsl(93deg 20% 68%) 67%,
            hsl(93deg 23% 70%) 75%,
            hsl(93deg 26% 73%) 83%,
            hsl(93deg 30% 76%) 92%,
            hsl(93deg 34% 78%) 100%
    );
}

.verhaal-block:nth-child(5n + 2) {
    grid-column: span 1;
    background-image: linear-gradient(
            0deg,
            hsl(326deg 7% 45%) 0%,
            hsl(326deg 7% 50%) 8%,
            hsl(327deg 8% 55%) 17%,
            hsl(327deg 10% 60%) 25%,
            hsl(327deg 12% 64%) 33%,
            hsl(327deg 14% 68%) 42%,
            hsl(327deg 17% 71%) 50%,
            hsl(327deg 20% 75%) 58%,
            hsl(327deg 24% 78%) 67%,
            hsl(327deg 29% 81%) 75%,
            hsl(327deg 36% 84%) 83%,
            hsl(327deg 46% 87%) 92%,
            hsl(327deg 61% 90%) 100%
    );
}

.verhaal-block:nth-child(5n + 3) {
    grid-column: span 1;
    background-image: linear-gradient(
            0deg,
            hsl(53deg 98% 25%) 0%,
            hsl(53deg 98% 28%) 8%,
            hsl(53deg 98% 31%) 17%,
            hsl(53deg 98% 33%) 25%,
            hsl(53deg 98% 36%) 33%,
            hsl(53deg 98% 38%) 42%,
            hsl(53deg 98% 40%) 50%,
            hsl(53deg 98% 42%) 58%,
            hsl(53deg 98% 44%) 67%,
            hsl(53deg 98% 45%) 75%,
            hsl(53deg 98% 47%) 83%,
            hsl(53deg 98% 49%) 92%,
            hsl(53deg 100% 50%) 100%
    );
}

.verhaal-block:nth-child(5n + 4),
.verhaal-block:nth-child(5n + 5) {
    grid-column: span 1;
    background-image: linear-gradient(
            0deg,
            hsl(235deg 5% 44%) 0%,
            hsl(235deg 5% 47%) 7%,
            hsl(235deg 5% 50%) 14%,
            hsl(235deg 6% 53%) 21%,
            hsl(234deg 7% 56%) 29%,
            hsl(234deg 8% 59%) 36%,
            hsl(234deg 9% 63%) 43%,
            hsl(234deg 10% 66%) 50%,
            hsl(234deg 12% 69%) 57%,
            hsl(234deg 14% 72%) 64%,
            hsl(233deg 17% 75%) 71%,
            hsl(233deg 20% 79%) 79%,
            hsl(233deg 25% 82%) 86%,
            hsl(233deg 32% 85%) 93%,
            hsl(233deg 42% 88%) 100%
    );
}

.verhaal-block:nth-child(5n + 1) .label,
.verhaal-block:nth-child(5n + 6) .label {
    background-color: var(--roze);
}

.verhaal-block:nth-child(5n + 2) .label {
    background-color: var(--groen);
}

.verhaal-block:nth-child(5n + 3) .label {
    background-color: var(--paars);
}

.verhaal-block:nth-child(5n + 4) .label,
.verhaal-block:nth-child(5n + 5) .label {
    background-color: var(--geel);
}

.verhaal-block h2,
.verhaal-block p {
    display: inline-block;
}

.verhaal-block a,
.event a {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 100%;
    transition: all 0.2s ease-in-out;
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -ms-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
}

.event a :is(h3, p) {
    color: white;
}

/*
.verhaal-block a:hover h3,
.event a:hover :is(h3, p) {
    text-decoration: underline;
    text-decoration-style: wavy;
    -moz-text-decoration-style: wavy;
    color: white;
}
*/

@media screen and (min-width: 640px) {
    .stories-wrapper {
        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    }

    .verhaal-block:nth-child(1),
    .verhaal-block:nth-child(9),
    .verhaal-block:nth-child(14),
    .verhaal-block:nth-child(21),
    .verhaal-block:nth-child(26),
    .verhaal-block:nth-child(37) {
        grid-column: span 2;
        grid-row: span 2;
    }

    .verhaal-block:nth-child(5n + 4) {
        grid-column: span 2;
        grid-row: span 1;
    }

    .verhaal-block:nth-child(4),
    .verhaal-block:nth-child(12),
    .verhaal-block:nth-child(14),
    .verhaal-block:nth-child(21),
    .verhaal-block:nth-child(27),
    .verhaal-block:nth-child(33) {
        grid-column: span 1;
        grid-row: span 2;
    }
}

/* Article / verhalen */

article {
    display: inline-grid;
    gap: 2ch;
    margin-block-end: 1rem;
    width: min(80ch, 100vw - 2rem);
    /*z-index: -1;*/
}

article > * {
    margin: 0;
}

article > p + h1,
article > p + h2,
article > p + h3,
article > p + h4,
article > p + h5,
article > p + h6 {
    margin-top: 2ch;
}

article p:not(:last-of-type) {
    margin-block-end: 0;
}

/* article h1::after {
    content: "";
    display: block;
    height: 20px;
    width: 100%;
    background-image: url(../img/wave-bar.svg);
    background-repeat: no-repeat;
    background-position: left;
    margin-block-start: var(--space-md);
} */

/* article p:first-of-type, */
.more-info-link {
    font-family: var(--header);
    font-size: calc(100% + 0.4vw);
}

table {
    font-variant-numeric: tabular-nums;
}

article table td {
    border-bottom: 5px solid var(--color-contrast-low);
}

article table tr > td:first-of-type {
    width: 10ch;
}


article table td {
    vertical-align: text-top;
    padding-block: var(--space-xs);
}

/* remove empty p-tags and grammerly extension tags that create whitespace */
article p:empty,
article p:has(.cGcvT) {
    display: none;
}

/* Agenda overzicht */

.event-wrapper {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    grid-auto-rows: 300px;
    grid-auto-flow: dense;
    grid-gap: 10px;
    margin-block-start: var(--space-md);
    margin-block-end: var(--space-md);
}

.no-result {
    display: flex;
    background-image: url(../img/ico-niks-gevonden.svg);
    background-repeat: no-repeat;
    background-position: left center;
    padding-inline-start: var(--space-xl);
    align-items: center;
    height: fit-content;
    padding-block: var(--space-xxl);
}

.events .archief .event.card, .related .event {
    grid-column: span 1;
    grid-row: span 1;
    background-color: hsl(93deg 34% 78%);
}

/* Agenda detailpagina */

.event-detail {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-xxl);
    align-items: start;
}

@media screen and (max-width: 640px) {
    .event-detail {
        gap: var(--space-md)
    }
}

.event-detail article .button {
    margin-block-start: var(--space-lg);
    margin-block-end: var(--space-lg);
    max-width: fit-content;
}

.event-detail aside .button {
    display: none;
}

aside .sponsor-list {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--space-sm);
    list-style: none;
    padding: 0;
}

aside .sponsor-list figure {
    aspect-ratio: 4 / 3;
    max-width: 100px;
}

aside .sponsor-list figure img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

address {
    font-family: var(--text);
    font-style: normal;
}

@media screen and (min-width: 940px) {
    aside .sponsor-list {
        flex-direction: column;
    }

    .story aside .sponsor-list {
        flex-direction: row;
    }

    aside .sponsor-list figure {
        max-width: 200px;
    }
}

/* related items */

article.related {
    display: grid;
    width: unset;
    margin-top: 1rem;
    max-width: unset;
}

.related .event-wrapper {
    margin-block-end: var(--space-xl);
}

.related .event.card figure {
    margin-block: 0;
}

.related .card, aside .event.card {
    grid-column: span 1;
    grid-row: span 1;
}

@media screen and (min-width: 940px) {
    .event-detail {
        grid-template-columns: minmax(300px, max-content) minmax(300px, 1fr);
    }

    .event-detail aside {
        padding-block-start: var(--space-md);
    }

    .event-detail aside .button {
        display: inline-block;
        margin-block-end: var(--space-lg);
    }
}

/* Aside */

.event-detail aside {
    z-index: unset;
}

ul.details-event {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs);
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: 90%;
    max-inline-size: 100%;
}

.event-detail figure.main-image {
    aspect-ratio: 9 / 5;
    margin-block: var(--space-md);
}

.event-wrapper.grid-view.archief figure {
    margin-block: 0;
}

.event-detail figure img,
.contributor figure img,
.story figure img {
    filter: unset;
    mix-blend-mode: unset;
    opacity: 1;
    -webkit-filter: unset;
}

.avatar {
    /* the size of the image */
    --b: 2px;
    /* the border thickness*/
    --g: 4px;
    /* the gap */
    --c: var(--groen);
    /* the color */

    display: inline-block;
    height: var(--s);
    width: 100px;
    aspect-ratio: 1;
    outline: calc(var(--s) / 2) solid #0009;
    outline-offset: calc(var(--s) / -2);
    transition: 0.3s;
    border-radius: 50%;
    overflow: hidden;
    margin-inline-end: var(--space-md);
    margin-inline-start: var(--space-sm);
    min-width: 100px;
    border: 1px solid var(--color-contrast-low);
}

.theme.avatar {
    height: unset;
    width: unset;
    aspect-ratio: unset;
    border-radius: 25px;
}

.website.avatar {
    width: 150px;
    min-width: 150px;
}

.social.avatar {
    width: 50px;
    min-width: 50px;
    margin-inline-end: 0.5rem;
}

aside a {
    text-decoration: none;
}

.sponsor-list .avatar {
    --s: 150px;
    outline: 2px solid #0009;
    outline-offset: 0;
    padding-inline: 1rem;
    min-width: 150px;
}

.avatar:hover {
    outline: var(--b) solid var(--c);
    outline-offset: var(--g);
}

.persoon, .moderator {
    display: flex;
    align-items: center;
    transition: all 0.5s var(--ease-elastic-2);
    -webkit-transition: all 0.5s var(--ease-elastic-2);
    -moz-transition: all 0.5s var(--ease-elastic-2);
    -ms-transition: all 0.5s var(--ease-elastic-2);
    -o-transition: all 0.5s var(--ease-elastic-2);
}

.sponsor-list, .persoon, .moderator {
    margin-top: 1rem;
}

.tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
    margin: var(--space-sm) 0 var(--space-lg);
    padding: 0;
    list-style: none;
}

.tags a {
    font-size: var(--text-xs);
    text-transform: uppercase;
    text-decoration: none;
    padding-inline: var(--space-md);
    padding-block: var(--space-xxs);
    color: black;
    border-radius: 20px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    -ms-border-radius: 20px;
    -o-border-radius: 20px;
}

.tags a:nth-child(5n + 1) {
    background-color: var(--groen);
}

.tags a:nth-child(4n + 2) {
    background-color: var(--roze);
}

.tags a:nth-child(3n + 3) {
    background-color: var(--paars);
}

.tags a:nth-child(2n + 4) {
    background-color: var(--geel);
}

/* footer */

footer {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: min-content min-content;
    margin-block-start: var(--space-xl);
    margin-inline-start: -1.5rem;
    margin-inline-end: -1.5rem;
}

footer div {
    grid-column: span 6;
    padding: var(--space-md);
}

footer div:last-of-type {
    grid-column: 1 / -1;
    grid-row: 3;
}

@media screen and (min-width: 640px) {
    footer div {
        grid-column: span 4;
    }

    footer {
        margin-inline-start: unset;
        background-repeat: no-repeat;
        background-size: cover;
    }
}

@media screen and (min-width: 970px) {
    footer {
        grid-template-rows: min-content min-content;
    }
}

/* 2 column layout */

@media screen and (min-width: 1366px) {
    .columns {
        display: grid;
        width: 100%;
        gap: 2rem;
        margin: 2vw auto;
        grid-template-columns: repeat(auto-fill, minmax(clamp(48%, (40rem - 100%) * 999, 100%), 1fr));
    }
}

.columns h2 {
    margin-block-end: var(--space-md);
}

.homepage--agenda,
.homepage--content {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

@media screen and (max-width: 1366px) {
    .homepage--content {
        padding-block-start: 2rem;
    }
}

.homepage--agenda .event {
    position: relative;
    width: 100%;
    height: 280px;
    overflow: hidden;
}

.homepage--agenda a, .homepage--content a {
    color: var(--color-primary);
}

.card-img-overlay {
    position: absolute;
    right: var(--space-md);
    left: var(--space-md);
    bottom: var(--space-md);
    display: flex;
    flex-direction: column;
}

.card-img-overlay .datum {
    width: fit-content;
    background-color: var(--roze);
    color: black;
    padding-block: var(--space-xxs);
    padding-inline: var(--space-xs);
    margin-block-end: var(--space-xs);
    font-size: 80%;
    font-family: var(--header);
}

.homepage--agenda .event figure {
    min-width: 100%;
    height: 100%;
    overflow: hidden;
}

figure {
    overflow: hidden;
}

figure img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

figure img:not(.spotlight figure img) {
    transform: scale(calc(1 + (var(--hover, 0) * 0.1)));
    -webkit-transform: scale(calc(1 + (var(--hover, 0) * 0.1)));
    -moz-transform: scale(calc(1 + (var(--hover, 0) * 0.1)));
    -ms-transform: scale(calc(1 + (var(--hover, 0) * 0.1)));
    -o-transform: scale(calc(1 + (var(--hover, 0) * 0.1)));
    transition: all 0.2s;
    -webkit-transition: all 0.2s;
    -moz-transition: all 0.2s;
    -ms-transition: all 0.2s;
    -o-transition: all 0.2s;
}

.card:is(:hover, :focus-visible),
.event:is(:hover, :focus-visible) {
    --hover: 1;
}

/*:has(.card:hover) .card:not(:hover) figure img {*/
/*    filter: contrast(0.3);*/
/*    -webkit-filter: contrast(0.3);*/
/*    opacity: 0.6;*/
/*}*/

/*:has(.card:hover) figure img {*/
/*    filter: contrast(0.8);*/
/*    -webkit-filter: contrast(0.8);*/
/*}*/

/* Agenda overzichtspagina */

.events .event {
    position: relative;
    width: 100%;
    height: 100%;
}

.events .event figure {
    position: absolute;
    min-width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Filter */

.filter {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
    padding-inline-start: var(--space-xl);
    background-image: url(../img/ico-filter.svg);
    background-repeat: no-repeat;
    background-position: left center;
    align-items: center;
    margin-bottom: 4rem;
}

.filter select, .filter input {
    cursor: pointer;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: #fff;
    border: 1px solid #ced4da;
    border-radius: 4px;
    box-sizing: border-box;
    color: #333;
    font-size: .85rem;
    font-weight: 700;
    height: 50px;
    min-width: 200px;
    padding: 0.75rem 0.5rem;
    text-transform: uppercase;
    width: 100%;
    background-image: url(../img/down-arrow.svg);
    background-position: 95%;
    background-repeat: no-repeat;
    background-size: 15px;
}

.filter p {
    font-family: var(--header);
    text-transform: uppercase;
    margin-right: 2rem;
}

.filter label {
    flex: 1;
}

/* Contributers overview page */

.contributer--highlight {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    grid-gap: 10px;
    margin-block: var(--space-lg);
}

.contributer--highlight h2 {
    grid-column: 1 / span 3;
}

.contributers-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    grid-auto-flow: dense;
    grid-gap: 10px;
    margin-block: var(--space-lg);
}

.contributer--card {
    display: flex;
    flex-direction: column;
    padding: var(--space-xs);
    border: 1px solid var(--color-contrast-low);
    min-width: 0;
    transition: all 0.5s var(--ease-elastic-2);
    -webkit-transition: all 0.5s var(--ease-elastic-2);
    -moz-transition: all 0.5s var(--ease-elastic-2);
    -ms-transition: all 0.5s var(--ease-elastic-2);
    -o-transition: all 0.5s var(--ease-elastic-2);
}

.contributer--card, .persoon, .moderator {
    transform: scale(calc(0.25 + (var(--shown, 1) * 0.75)));
}

.contributer--card figure {
    position: relative;
    aspect-ratio: 4 / 3;
    margin-block-end: var(--space-sm);
}

aside .contributer--card figure {
    margin-block-end: unset;
}

.contributer--card h4 {
    text-align: center;
}

.contributer--card img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: unset;
    mix-blend-mode: unset;
    opacity: 1;
    -webkit-filter: unset;
    margin-block-end: var(--space-xs);
}

.contributor article .title-logo {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

aside .contributer--card {
    display: inline-flex;
    flex-direction: unset;
    align-items: center;
    border: none;
    padding: 0;
}

aside .contributer--card figure {
    aspect-ratio: 1 / 1;
    max-width: 150px;
}

aside .contributor--container {
    margin-bottom: 1rem;
}

aside .website-logo, aside .contributor-socials {
    margin-bottom: 2rem;
}

/* visueel verborgen */

.visuallyhidden {
    position: absolute;
    width: 1px;
    /* Setting this to 0 make it invisible for VoiceOver */
    height: 1px;
    /* Setting this to 0 make it invisible for VoiceOver */
    padding: 0;
    margin: -1px;
    border: 0;
    clip: rect(0 0 0 0);
    overflow: hidden;
}

/*
TODO: skiplink nog implementeren
.skip-link {
    position: absolute;
    top: 1rem;
    left: -9999rem;
}

.skip-link:focus {
    left: 1rem;
}

.skip-link:focus+aside {
    margin-block-start: 20vh;
}
*/

.grid-view .card {
    position: relative;
    padding: 0;
    margin: 0;
    min-width: 0;
    transition: all 0.5s var(--ease-elastic-2);
    -webkit-transition: all 0.5s var(--ease-elastic-2);
    -moz-transition: all 0.5s var(--ease-elastic-2);
    -ms-transition: all 0.5s var(--ease-elastic-2);
    -o-transition: all 0.5s var(--ease-elastic-2);
}

.grid-view .card {
    transform: scale(calc(0.25 + (var(--shown, 1) * 0.75)));
}

/* Search page */

@media screen and (max-width: 1023px) {
    .search .container {
        width: min(60ch, 100vw - 2rem);
    }
}

@media screen and (max-width: 799px) {
    .search .container {
        width: min(40ch, 100vw - 2rem);
    }
}

.search h1 {
    margin-bottom: 1rem;
}

.search .search-input {
    width: 100%;
}

.search .event {
    margin-bottom: 4rem;
    min-height: 250px;
}

@media screen and (min-width: 800px) {
    .search .event {
        min-height: 200px;
    }
}

.search .event:not(:first-of-type):after {
    position: absolute;
    content: "";
    display: block;
    height: 20px;
    width: 100%;
    /*background-image: url(../img/wave-bar.svg);*/
    /*background-repeat: no-repeat;*/
    /*background-position: center;*/
    top: -40px;
}

.search .card-img-overlay {
    right: var(--space-md);
}

/* Container querie FTW */

.grid-view {
    container-type: inline-size;
    container-name: gridview;
}

@container gridview (min-width: 320px) {
    .card h3 {
        font-size: max(1.5rem, 2.2cqi - 1rem);
    }
}

@container gridview (min-width: 1500px) {
    .card h3 {
        font-size: min(1.5rem, max(1.3rem, 1.5cqi - 1rem));
    }
}

@container gridview (min-width: 640px) {
    :has(.spotlight, .events) .event:nth-child(2) h3,
    :has(.spotlight, .events) .event:nth-child(8) h3,
    :has(.spotlight, .events) .event:nth-child(14) h3,
    :has(.spotlight, .events) .event:nth-child(20) h3,
    :has(.spotlight, .events) .event:nth-child(24) h3,
    :has(.spotlight, .events) .event:nth-child(32) h3 {
        font-size: max(2.5rem, 2.6cqi - 1rem);
    }
}

@container gridview (min-width: 640px) {
    .archief .event .card-img-overlay h3 {
        font-size: min(1.5rem, max(1.3rem, 1.5cqi - 1rem));
    }
}

.card-body span {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.event h3,
.verhaal-block h3 {
    z-index: 2;
    line-height: 1.4;
}

.event :is(h3, p),
.verhaal-block :is(h3),
.homepage-stories .stories :is(h3, p) {
    position: relative;
    color: #fff;
    /*box-shadow: 4px 0px 0 0px var(--color-primary), -8px 0px 0 0px var(--color-primary);
      */
    padding: 2px 5px 2px 5px;
    display: inline;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
    word-wrap: break-word;
    background-color: var(--color-primary);
    transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.675);
    -webkit-transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.675);
    -moz-transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.675);
    -ms-transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.675);
    -o-transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.675);
}

.event p:empty {
    display: none;
}

.event:hover :is(h3, p),
.verhaal-block:hover :is(h3, p) {
    padding: 6px;
    line-height: 1.7;
}

/* Datepicker */

.datepicker.datepicker-dropdown {
    position: absolute;
    border: 1px solid #000;
    border-radius: 8px;
    padding: 0.1rem;
    width: 250px;
    background-clip: padding-box;
    background-color: #fff;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, .15);
    color: #333;
    display: none;
    font-size: 1rem;
    list-style: none;
    margin: 0;
    min-width: 10rem;
    text-align: left;
    z-index: 1000;
}

.datepicker .table-condensed {
    text-align: center;
    width: -webkit-fill-available;
}

.datepicker th, .datepicker td {
    cursor: pointer;
}

/* Homepage stories */

.homepage-stories {
    display: grid;
    gap: var(--space-md);
}

@media screen and (min-width: 910px) {
    .homepage-stories {
        grid-template-columns: repeat(2, 1fr);
    }
}

.homepage-stories .stories {
    position: relative;
    height: 280px;
    grid-column: span 1;
    grid-row: span 1;
}

.homepage-stories .stories figure {
    height: 100%;
}

/* Boltforms */

form.boltforms {
    border: 2px solid #000;
}

.boltforms div {
    padding: 1rem;
}

.boltforms {
    color: #000;
    padding: 1rem;
}

.boltforms label {
    width: 100%;
    display: inline-block;
}

.boltforms input[type=date], .boltforms input[type=email], .boltforms input[type=file], .boltforms input[type=text], .boltforms select, .boltforms textarea {
    border: 1px solid #ced4da;
    padding: 1rem;
    position: relative;
    transition: all .3s ease-in-out;
    width: 100%;
}

.boltforms .row-submit {
    text-align: center;
}

/* Themes */

.theme .event-detail article {
    max-width: 690px;
    width: unset;
}

.label.theme {
    right: var(--space-sm);
    left: unset;
}

.label.theme.blue_label, .event .blue_label, .blue_label {
    background-color: #1D66FF;
    color: white;
}

.label.theme.yellow_label, .event .yellow_label, .yellow_label {
    background-color: #FFDC29;
    color: black;
}

.label.theme.pink_label, .event .pink_label, .pink_label {
    background-color: #F2D3E4;
    color: black;
}

.label.theme.green_label, .event .green_label, .green_label {
    background-color: #C2D6B2;
    color: black;
}

.label.theme.grey_label, .event .grey_label, .grey_label {
    background-color: #D2D5EA;
    color: black;
}

.agenda-item aside .label, .story aside .label, .contributor aside .label {
    position: relative;
    border: none;
    top: unset;
    right: unset;
    max-width: unset;
    cursor: pointer;
}

aside button.label.theme {
    line-height: var(--body-line-height);
    font-family: var(--text);
    font-size: clamp(1rem, 1rem + 0.2vw, 1.6rem);
    text-transform: unset;
    margin: 0 0 1rem 0;
}

aside .theme--container {
    margin-inline-end: var(--space-md);
    margin-inline-start: var(--space-sm);
}

aside .theme:last-child {
    margin-bottom: 2rem;
}


/* Page contenttype */

.page article {
    max-width: 1200px;
    width: unset;
    gap: 3rem;
}

.page article h3 {
    margin-top: 0;
    padding-bottom: 1rem;
}

.page header h1 {
    text-align: center;
}

.page #partner {
    max-width: 850px;
}

.page form.boltforms {
    padding: 0;
}

.page form.boltforms .recaptcha {
    padding: 0;
}