.container {
    margin: 0 auto;
}

@media (max-width: 768px) {
    .container {
        padding: 0.5rem;
        width: 100%;
    }
}
@media (min-width: 769px) {
    .container:not(.container-fluid) {
        max-width: 1536px;
        padding: 1rem 0;
        width: 95%;
    }

    .container-fluid {
        padding: 1rem 0.5rem;
    }
}

/* Container aligned left like others, but allows horizontal scroll overflow */
.scroll-overflow-container {
    width: 100%;
}

/* Title/heading inside scroll container needs padding */
.scroll-overflow-container > h3,
.scroll-overflow-container > h2,
.scroll-overflow-container > p {
    padding-left: 0.5rem;
}

@media (min-width: 769px) {
    .scroll-overflow-container > h3,
    .scroll-overflow-container > h2,
    .scroll-overflow-container > p {
        padding-left: calc((100% - 95%) / 2);
    }
}