#home {
    main {
        @media(max-width: 700px) {
            display: flex;
            flex-flow: column;
        }
        header {
            margin: 1rem 1rem 0 1rem;
            max-width: 100%;
            .subtitle {
                margin-top: 0;
                font-style: italic;
            }
        }
        p {
            font-size: var(--p-size);
            line-height: 1.3;
            b, strong {
                font-weight: 600;
            }
        }
    }
    #introduction-top-fold {
        @media(min-width: 640px) {
            display: grid;
            grid-template-columns: 1fr;
            column-gap: 6rem;
            grid-template-columns: 3fr 2fr;
            grid-template-areas:
                "greeting  shows"
                "stickers  shows"
                /* "contact   shows" */
                /* "contact   shows" */
                /* "contact   shows" */
                "contact   shows";
            #greeting{
                margin-bottom: 0;
                grid-area: greeting;
            }
            #stickers {
                display: flex;
                align-items: flex-start;
                justify-content: space-around;
                grid-area: stickers;
            }
            #shows {
                grid-area: shows;
            }
            #contact {
                grid-area: contact;
            }
        }
        section {
            margin: 0 1rem 1rem 1rem;
        }
    }

    h1 {
        font-style: italic;
        font-weight: 600;
        font-size: var(--h1-size);
    }

    #shows {
        --section-color: var(--benzol-green);
        .show-list {
            list-style-type: none;
            padding: 0;
            .show {
                position: relative;
                margin-bottom: var(--space-xxl);
                display: flex;
            }
            .show:last-of-type {
                margin-bottom: 2rem;
            }
            .p-summary {
                margin: 0;
                font-size: var(--font-size-6);
                /* color: var(--section-color); */
            }
            .show-dates {
                margin: 0;
                font-weight: 600;
                margin-bottom: 1rem;
            }
            .show-poster {
                display: flex;
                justify-content: center;
                align-items: center;
                margin: 0;
                margin-right: 1rem;
                margin-bottom: 1rem;
                padding: 0;
                max-width: 11rem;
                float: left;
                border: 1px solid var(--section-color);
                /* ISO 216 (A sizes) dimensions */
                height: calc(11rem * 1.41421356237);
                img {
                    width: 100%;
                }
            }
            .show-description {
                margin: 0;
            }
            .ticket-btn {
                font-size: var(--font-size-2);
                background: color-mix(in oklab, var(--section-color), var(--cream));
                border: 2px ridge var(--section-color);
                padding: var(--space-xs);
                color: ghostwhite;
            }
        }
    }
    #contact {
        .form-sticker {
           --section-color: var(--hyacinth-violet);
                @media(min-width: 1400px) {
           max-width: 50%;
                }
                .form-name {
           color: var(--cream);
                    /* font-weight: 300; */
                }
                input[type=submit]:hover {
           color: var(--cream);
                }
            }
        }
    }
    .fold {
        display: flex;
        flex-flow: column;
        justify-content: space-around;
        width: 100%;
    }
    .fold.two-column {
        flex-flow: row;
        flex-wrap: wrap;
        justify-content: space-between;
    }

    #radio-and-comedy {
        .left.column {
            max-width: var(--readable-width);
            overflow: hidden;
            section {
                margin-bottom: var(--p-size);
            }
            figure {
                margin: 0 var(--p-size) var(--p-size) 0;
                max-width: 150px;
                float: left;
                display: flex;
                flex-flow: column;
                justify-content: center;
                align-items: center;
            }
        }
        .right.column {
            display: flex;
            flex-flow: column;
            flex: 1;
            justify-content: center;
            align-items: center;
            figure {
                margin: 0;
                img {
                    width: calc(var(--readable-width)/2);
                }
            }
        }
    }
    #recent-changes {
        .section-sticker {
            --section-color: #ffee33;
        }
        display: flex;
        justify-content: space-around;
        align-items: center;
        flex-wrap: wrap;
        h2 {
            width: 100%;
            text-align: center;
        }
        #recent-changes-list {
            max-width: 40rem;
            list-style-type: none;
            padding: 0;
            display: flex;
            flex-flow: column;
            align-items: center;
            li {
                margin-bottom: 1rem;
                b {
                    margin-bottom: 0;
                }
                .date {
                    margin: 0;
                    margin-bottom: var(--space-xxs);
                    font-size: var(--font-size-1);
                }
                .description {
                    margin-top: 0;
                }
            }

        }
    }
}