@font-face {
    font-family: 'Avenir Medium';
    src: url('Avenir_Medium.ttf');
}
body {
    font-family: 'Avenir Medium', sans-serif;
    word-wrap: break-word;
    white-space: normal;
    margin: 0;
    padding: 0;
}

.gallery {
    --size: 15em;
    /* control the size */

    --gap: 1em;
    /* control the gap */

    --zoom: 3;
    /* control the scale factor */

    display: grid;
    gap: var(--gap);
    width: calc(3*var(--size) + 2*var(--gap));
    aspect-ratio: 1;
    grid-template-columns: repeat(3, auto);
}

.gallery figure {
    margin: 0;

    padding: 0;
    position: relative;
}

.gallery figcaption {
    position: absolute;
    bottom: 0;
    left: 0;
    text-align: center;
    width: 100%;
    opacity: 0;
    color: white;
    background: rgb(0 0 0 / 0.3);
}

.gallery figure:hover figcaption,
.gallery figure:focus figcaption {
    opacity: 1;
}

.gallery > figure img {
    width: 0;
    height: 0;
    min-height: 100%;
    min-width: 100%;
    object-fit: cover;
    cursor: pointer;
    filter: grayscale(0%);
    transition: .35s linear;
}

.gallery figure:hover img,
.gallery figure:focus img {
    filter: grayscale(0);
    width:  calc(0.5*var(--size)*var(--zoom));
    height: calc(0.5*var(--size)*var(--zoom));
}

.w3-theme-l8 {color:#074b83 !important; background-color:#f5fafe !important}
.w3-theme-l7 {color:#074b83 !important; background-color:#f3f9fe !important}
.w3-theme-l6 {color:#074b83 !important; background-color:#e7f3fe !important}
.w3-theme-l5 {color:#074b83 !important; background-color:#d2eafd !important}
.w3-theme-l4 {color:#074b83 !important; background-color:#b7dcfa !important}
.w3-theme-l3 {color:#074b83 !important; background-color:#a6d4fa !important}
.w3-theme-l2 {color:#074b83 !important; background-color:#79bff8 !important}
.w3-theme-l1 {color:#fff !important; background-color:#4daaf6 !important}
.w3-theme-d1 {color:#fff !important; background-color:#0c87eb !important}
.w3-theme-d2 {color:#fff !important; background-color:#0b78d1 !important}
.w3-theme-d3 {color:#fff !important; background-color:#0a69b7 !important}
.w3-theme-d4 {color:#fff !important; background-color:#085a9d !important}
.w3-theme-d5 {color:#fff !important; background-color:#074b83 !important}

.w3-theme-d6 {color:#fff !important; background-color:#053861 !important}
.w3-theme-d7 {color:#fff !important; background-color:#042a49 !important}
.w3-theme-d8 {color:#fff !important; background-color:#031c30 !important}
.w3-theme-d9 {color:#fff !important; background-color:#010e18 !important}

.w3-theme-light {color:#074b83 !important; background-color:#f5fafe !important}
.w3-theme-dark {color:#fff !important; background-color:#053861 !important}
.w3-theme-action {color:#fff !important; background-color:#053861 !important}

.w3-theme {color:#fff !important; background-color:#2196f3 !important}
.w3-text-theme {color:#074b83 !important}
.w3-border-theme {border-color:#2196f3 !important}

.w3-hover-theme:hover {color:#fff !important; background-color:#2196f3 !important}
.w3-hover-text-theme:hover {color:#2196f3 !important}
.w3-hover-border-theme:hover {border-color:#2196f3 !important}