:root {
    --max-body-width: 1000px;
}

html,
body {
    padding: 0;
    margin: 0 auto;
    max-width: var(--max-body-width);
    font-family: 'Courier New', Courier, monospace;
}

figure img {
    border-radius: 4px;
    border: 1px solid black;
    max-width: 100%;
}
figcaption {
    text-align: center;
    font-size: 0.8em;
}
/*
// Gallery example from
// https://web.dev/articles/css-scroll-snap#example:-a-horizontal-gallery
*/

.gallery {
    position: relative;
    padding: 0 10;
    max-width: var(--max-body-width);
}

.gallery img {
    width: 960px;
}

.gallery_scroller {
    /* snap mandatory on horizontal axis  */
    scroll-snap-type: x mandatory;

    overflow-x: scroll;
    overflow-y: hidden;

    display: flex;
    align-items: center;

    /* Enable Safari touch scrolling physics which is needed for scroll snap */
    -webkit-overflow-scrolling: touch;
}


.gallery_scroller div {
    /* snap align center  */
    scroll-snap-align: center;
    margin: 10px;
    position: relative;
}

.gallery .btn {
    position: absolute;

    top: 50%;
    transform: translateY(-50%);

    height: 30px;
    width: 30px;

    border-radius: 2px;
    background-color: rgba(0,0,0,0.5);
    background-position: 50% 50%;
    background-repeat: no-repeat;

    z-index: 1;
}

.gallery .btn.next {
    background-image: url('data:image/svg+xml;charset=utf-8,<svg width="18" height="18" viewBox="0 0 34 34" xmlns="http://www.w3.org/2000/svg"><title>Shape</title><path d="M25.557 14.7L13.818 2.961 16.8 0l16.8 16.8-16.8 16.8-2.961-2.961L25.557 18.9H0v-4.2z" fill="%23FFF" fill-rule="evenodd"/></svg>');
right: 10px;
}

.gallery .btn.prev {
    background-image: url('data:image/svg+xml;charset=utf-8,<svg width="18" height="18" viewBox="0 0 34 34" xmlns="http://www.w3.org/2000/svg"><title>Shape</title><path d="M33.6 14.7H8.043L19.782 2.961 16.8 0 0 16.8l16.8 16.8 2.961-2.961L8.043 18.9H33.6z" fill="%23FFF" fill-rule="evenodd"/></svg>');
left: 10px;
}