$web-visual-toc: true !default;
@if $web-visual-toc {

    .visual-toc {
        font-family: $font-text-secondary;
        margin: 3rem 0 4rem 0;

        @media only screen and (min-width: $max-width-default) {
            width: 100vw;
            margin-left: calc(-1 * ((100vw - #{$max-width-default}) * 0.5 + 1rem))
        }

        .visual-toc-list {

            @media only screen and (min-width: $max-width-default) {
                display: grid;
                grid-template-columns: 1fr 1fr;
                gap: ($content-padding-top * 3) ($content-padding-left * 3);
                justify-content: space-between;
                margin-left: $content-padding-left * 2;
                margin-right: $content-padding-right * 2;
            }

            @media only screen and (min-width: ($max-width-default * 2)) {
                grid-template-columns: 1fr 1fr 1fr;
            }

            list-style-type: none;
            margin: 0;
            padding: 0;

            & > li {

                margin-bottom: 2rem;

                @media only screen and (min-width: $max-width-default) {
                    display: grid;
                    grid-template-columns: 8rem 1rem 1fr;
                    grid-template-rows: max-content 1fr;
                    margin-bottom: 0;
                }

                // Ensure element expands to the height`
                // of its floated child (the image)
                // https://stackoverflow.com/a/10969052/1781075
                &::after {
                    content: "";
                    display: table;
                    clear: both;
                }

                .visual-toc-chapter-image {

                    @media only screen and (min-width: $max-width-default) {
                        grid-row-start: 1;
                        grid-row-end: 3;
                    }

                    border: 1px solid $grey-light;
                    overflow: hidden;
                    float: left;
                    margin-left: 0;
                    margin-right: 1rem;
                    height: 8rem;
                    width: 8rem;

                    a {
                        text-decoration: none;
                    }

                    img {
                        height: 8rem;
                        width: 8rem;
                        object-fit: cover;
                    }

                    .visual-toc-thumbnail-initial {
                        width: 100%;
                        height: 100%;
                        text-align: center;
                        font-size: 4rem;
                        padding: 2.5rem 0;
                        background-color: $color-accent;
                        color: $white;
                    }
                }

                .visual-toc-chapter-title {
                    font-weight: bold;
                    margin-top: 0.5rem;

                    @media only screen and (min-width: $max-width-default) {
                        grid-column-start: 3;
                        margin-top: 0;
                    }
                }

                .visual-toc-chapter-description {

                    @media only screen and (min-width: $max-width-default) {
                        grid-column-start: 3;
                    }
                }
            }

            // If using numbers as chapter icons,
            // don't display numbers created by
            // markdown ordered lists.
            &.visual-toc-list-numbered {

                ol {
                    list-style-type: none;
                    margin: 0;
                }
            }
        }
    }
}
