.parallel-code .content {
    grid-template-columns: auto auto;
    >:not(.highlight) {
        grid-column: span 2;
    }
    .highlight {
        font-size: 0.8em;
    }
}


article.slide:not(.title) {

    &.p-then-examples .content {
        /* grid-auto-rows: auto; */
        /* grid-template-rows: min-content; */
        > p:first-of-type {
            grid-column: 1 / -1;
        }
    }

    &.brendan .content {
    
        @media (width>500px) {
            grid-template-columns: 2fr 3fr;
            grid-template-rows: 3fr 2fr auto;
        }
    
        p:has(img) {
            grid-column: span 2;
            img {
                aspect-ratio: 8;
                object-position: center;
            }
        }
    }
    &.ecma .content {
    
        img {
            aspect-ratio: 1.5;
            object-position: top;
            display: none;
        }

        ul {
            display: grid;
            font-size: 1.3em;
            grid-row: span 2;
        }
    
        @media (width>700px) {
            img {
                display: grid;
            }
            grid-template-rows: 1fr auto;
            grid-template-columns: 2fr 5fr;
    
            p:has(img):last-of-type img {
                aspect-ratio: auto;
                object-fit: contain;
                /* grid-row: span 2; */
            }
    
            blockquote {
                grid-column: 2;
                font-size: 1.4em;
                font-weight: 400;
            }
        }
        font-size: 1em;
    
    }
}



.hello .content {

    @media (width>500px) {
        grid-template-columns: 2fr 3fr;
        grid-template-rows: auto auto auto auto auto auto auto;
        gap: 2px 0;
    }

    blockquote:nth-of-type(4) {
        grid-row: span 2;
    }
}

.strict .content {
    grid-template-rows: auto 1fr 1fr auto;
}

.scope .content {
    grid-template-columns: 1fr 3fr 1fr;
    grid-auto-rows: auto;
    gap: 2px;
    blockquote {
        font-size: 3em;
        p {margin: 0;}
        &:first-of-type,
        &:last-of-type {
            font-size: 1em;
            grid-column: span 3;
        }
    }
    h3 {
        background: var(--accent-gradient);
        color: var(--clr-accent-text);
        margin: 0;
        padding: 0.5rem;
    }
}

.events .content {

    blockquote {
        grid-template-rows: min-content min-content 1fr;
        ul {
            width: 100%;
            display: flex;
            justify-content: center;
            flex-wrap: wrap;
            gap: 0.5rem;
            list-style: none;
            padding: 0;
            li {
                display: grid;
                place-items: center;
                code {
                    background: none;
                }
                a {
                    background: var(--accent-gradient);
                    padding: 0.5rem 1rem;
                    border: 0.5px solid white;
                    border-radius: 2rem;

                }
                a::after {
                    content: "";
                }
            }
        }
    }
}

.live-server .content {
    p:has(img) {
        display: grid;
        img {
            aspect-ratio: 2.8;
        }
    }
}

.declarative .content {
    grid-template-rows: 1fr 1fr min-content 1fr;
    p:last-of-type {
        grid-column: span 2;
        margin-inline: auto;
    }
    blockquote:last-of-type {
        font-size: 1em;
    }
}

.min-examples .content {
}
.arrays .content {
    grid-template-rows: min-content 1fr 1fr 1fr 1fr;
}

.conditionals .content .highlight:last-of-type {
    grid-column: span 2;
}