/* css/layout.css */
main {
    display: block;
    width: 100%;
    /* overflow: hidden; For elements that might overflow horizontally */
}

/* Common Section Padding */
.section {
    padding: var(--section-padding-pc) 0;
    position: relative;
    z-index: var(--z-content);
}

/* Inner Container */
.inner {
    width: var(--inner-width);
    margin: 0 auto;
    position: relative;
}

/* Full Bleed Section */
.full-bleed {
    width: 100%;
    max-width: 100%;
    padding-left: 0;
    padding-right: 0;
}

/* Responsive Layout */
@media screen and (max-width: 1200px) {
    .section {
        padding: var(--section-padding-tablet) 0;
    }
    
    .inner {
        width: calc(100% - 48px);
    }
}

@media screen and (max-width: 680px) {
    .section {
        padding: var(--section-padding-mobile) 0;
    }
    
    .inner {
        width: calc(100% - 32px);
    }
}