ostermanj

<img 
    srcset="images/my-cat-xs.jpg 250w, image/my-cat-s.jpg 500w, image/my-cat-m.jpg 1000w, image/my-cat-l.jpg 1000w, image/my-cat-xl.jpg 1500w"
    sizes="(min-width: 1300px) 1300px, (min-width: 1024px) 69vw, (min-width: 700px) 85vw, 50vw"
    src="image/my-cats-s.jpg"
/>

ostermanj

<article class="tl-all-wrapper" title="Assassination of Archduke Franz Ferdinand">
        <a class="tl-all-link" href="/content/en/timeline-event/holocaust/before-1933/assassination-of-archduke-franz-ferdinand">
            <div class="tl-all-info-cont tl-event-dot">
                <header>
                    <p class="tl-all-event-date">
                        June 28, 1914
                    </p>
                    <p class="tl-all-event-title">
                        <strong>Assassination of Archduke Franz Ferdinand</strong>
                    </p>

ostermanj

.tl-all-event-desc {
  max-width: 400px;
  font-size: 1em;
  display: none; 
}
@container article-item (min-width: 470px) {
  .tl-all-event-desc {
    display: block;
  }
}

ostermanj

.tl-all-wrapper {
	container: article-item / inline-size;
}

ostermanj

.tl-all-event-desc {
  max-width: 400px;
  font-size: 1em;
  display: none;
}
@media screen and (min-width: 500px) {
  .tl-all-event-desc {	
    display: block;
  }
 }

ostermanj

import { initContentful, getPageContent, getEntry } from '$utils/contentful';
import { C_SPACE, C_TOKEN } from "$env/static/private";

initContentful(C_SPACE, C_TOKEN);

[...]

ostermanj

mbHelper.addSourceAndLayers.call(map,
    { // source
        "type": "vector",
        "url": "mapbox://mapbox.us_census_states_2015",
        "name": "states"
    }, [ // layers
        { // layer one
            "id": "states-join",
            "type": "fill",
            "source-layer": 'states',