body {
    main {
        #gallery {
            .gallery {
                list-style-type: none;
                display: flex;
                flex-wrap: wrap;
                margin: -1rem -1rem;
                padding-bottom: 3rem;

                .gallery-item {
                    position: relative;
                    flex: 1 0 22rem;
                    margin: 1rem;
                    color: $off-white;
                    box-shadow: 1px 1px 1px 2px rgba(200, 200, 200,.5);          cursor: pointer;
                    border-radius: 5%;

                    .gallery-image {
                        cursor: pointer;
                        border-radius: 5%;
                        width: 100%;
                        height: 100%;
                        object-fit: cover;
                    }
                }
            }

            .gallery-item,
            .gallery {
                width: auto;
                margin: 0;
            }

            img, video {
                display: block;
            }

            @supports (display: grid) {
                .gallery {
                    display: grid;
                    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
                }
            }
        }
    }
}