.whatson {  --spacing:18px;  }
body.home .whatson { background-color: var(--bg_blue); color:white; border-radius: var(--section-radius); padding: 40px; --icon:24px; min-width: 480px; width: calc(50% - var(--gutter)); }

.whatson article { padding: 32px;background-color: white; color:black; border-radius: var(--radius); margin-bottom: 32px; overflow: hidden; position: relative; }
body.home .whatson article:last-child { margin-bottom: 0; }

body:not(.home) .whatson {display: flex; flex-wrap: wrap; gap:var(--gutter);}
body:not(.home) .whatson h2 {width:100%; margin: 0; }
body:not(.home) .whatson article {width:calc(50% - (var(--gutter) / 2));  margin: 0;}


.whatson .icon.ext_icon { float: right;}
.whatson h3 { font-size: 24px; margin-bottom: var(--spacing);}
.whatson h3 a { color:inherit;}
.whatson p.date { margin-bottom: var(--spacing);}

.whatson a::after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;

}

.whatson p { font-size: 16px; line-height: 1.4;}

@media all and (max-width:1199.98px) {
    .whatson { padding: 32px; }
}
@media all and (max-width: 899.98px) {
    body.home .whatson,
    .whatson { padding: 24px;  --icon:16px; --spacing:var(--bodytext_size);  width: 100%;  margin-top: calc(var(--gutter_big) * 2); min-width: 300px;
        width: calc(100% + calc(var(--section-padding) / 2));
        position: relative;
        left: calc(0px - calc(var(--section-padding) / 4));
    }
    .whatson article { padding: var(--section-padding); }
}


@media all and (max-width: 599.98px) {
    body:not(.home) .whatson article { width: 100%;}
    .whatson {   }
    .whatson h3 { font-size: var(--bodytext_size); }
}