main {
	margin: 2rem 0;
    min-height: 40rem;
	display: flex;
	flex-flow: column nowrap;
	margin-top: 5rem;
	overflow-x: hidden;
	&.body-content--scroll-x {
		width: 300vw;
	}
	
	> section {
		margin-block: clamp(1.5rem, 4.8vw, 3rem);
	}
}

code {
	color: $white;
	background: $brand-dark-gray;
	display: block;
	padding: 1.25rem;
	margin: 1.5rem 0;
}

code.code--inline {
    width: auto;
    display: inline-block;
    min-width: 18rem;
}

.intro-copy {
	font-size: clamp(1.25rem, 2vw, 1.5rem);
	text-align: center;

}


.display {
    &--flex {
        display: flex;
        gap: 1rem
    }
}

.plugins-list-inline {
    ul {
        display: flex;
        flex-flow: row wrap;
        justify-content: center;
        gap: 0.5rem;
        list-style: none;
        
        > li {
            list-style: inherit;
            display: block;
        }

        a {
            padding: 0.5rem 1rem;
            border-radius: 2rem;
            border: 1px solid;
            text-decoration: none;
            font-weight: 700;
            transition: color 200ms ease, background-color 200ms ease;
            display: block;
            
            &:hover,
            &:focus {
                background: $font-body-color;
                color: $white;
            }
        }
    }
}