.main-menu {
    margin-bottom: 15px;

    & a {
        font-family: 'Century Gothic', Garamond, 'Times New Roman', serif;
        font-size: 1.05em;

        @media (min-width: 768px) {
            font-weight: bolder;
            font-size: 1.5em;
        }
    }

    & *.logo-title {
        margin: 0.5em auto;

        a {
            font-weight: bolder;
            font-size: 1.2em;

            @media (min-width: 768px) {
                font-size: 3.5em;
            }
        }
    }

    @media (min-width: 768px) {
        display: flex;
        flex-direction: row;
        justify-content: flex-end;
        padding: 4ex;

        >* {
            margin-inline-end: 1.5ex;
        }

        .left-group-end {
            margin-inline-start: auto;
        }

        .right-group-start {
            margin-inline-start: auto;
        }
    }
}

.media-gallery {
    display: grid;
    grid-template-columns: 1fr;

    & article {
        margin-bottom: 20px;

        & iframe {
            width: 140px;
            height: 79px;

            @media (min-width: 768px) {
                width: 560px;
                height: 315px
            }
        }

        & footer {
            @media (min-width: 768px) {
                margin: 0.5em 1em 2em 1em;
            }
        }
    }

    @media (min-width: 768px) {
        grid-template-columns: 1fr 1fr 1fr;
    }
}

ul.plain-list {
    list-style-type: none;
    padding-left: 0;
}

article {
    max-width: 768px;
    margin: 0.5em 1em 2em 1em;

    & h1 {
        font-size: large;
    }
}

figure {
    img {
        max-width: 100%;
        height: auto;
    }
}

figcaption {
    text-align: center;
}

.centered-block { /* this doesn't seem to work on the banner figure in ./people/index.html */
    margin: 0, auto;
}

img.background {
    position: absolute;
    opacity: 0.08;
    width: 50%;
}

ul.horizontal {
    list-style-type: none;
    padding-left: 0;

    >li {
        display: inline-block;
    }
}

.overlay-container {
    position: relative;

    >* {
        position: absolute;
    }
}

.overlay {
    width: 100vw;
    height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 0px;
    padding: 0px;
}

.centered-text {
    text-align: center;
}

.black-background {
    background-color: black;
    color: white;
}