.Section {
    padding-top: var(--spacing-500);
    padding-bottom: var(--spacing-500);
}

/* Sizes */

.Section.size1 {
    padding-top: var(--spacing-200);
    padding-bottom: var(--spacing-200);
}

.Section.size2 {
    padding-top: var(--spacing-500);
    padding-bottom: var(--spacing-500);
}

.Section.size3 {
    padding-top: var(--spacing-800);
    padding-bottom: var(--spacing-800);
}

/* Expanded */

.Section.expanded {
    min-height: 100vh;
}

/* Responsive */

@media (--breakpoint-1) {
    .Section.bp1-size1 {
        padding-top: var(--spacing-200);
        padding-bottom: var(--spacing-200);
    }

    .Section.bp1-size2 {
        padding-top: var(--spacing-500);
        padding-bottom: var(--spacing-500);
    }

    .Section.bp1-size3 {
        padding-top: var(--spacing-800);
        padding-bottom: var(--spacing-800);
    }
}

@media (--breakpoint-2) {
    .Section.bp2-size1 {
        padding-top: var(--spacing-200);
        padding-bottom: var(--spacing-200);
    }

    .Section.bp2-size2 {
        padding-top: var(--spacing-500);
        padding-bottom: var(--spacing-500);
    }

    .Section.bp2-size3 {
        padding-top: var(--spacing-800);
        padding-bottom: var(--spacing-800);
    }
}

@media (--breakpoint-3) {
    .Section.bp3-size1 {
        padding-top: var(--spacing-200);
        padding-bottom: var(--spacing-200);
    }

    .Section.bp3-size2 {
        padding-top: var(--spacing-500);
        padding-bottom: var(--spacing-500);
    }

    .Section.bp3-size3 {
        padding-top: var(--spacing-800);
        padding-bottom: var(--spacing-800);
    }
}

@media (--breakpoint-4) {
    .Section.bp4-size1 {
        padding-top: var(--spacing-200);
        padding-bottom: var(--spacing-200);
    }

    .Section.bp4-size2 {
        padding-top: var(--spacing-500);
        padding-bottom: var(--spacing-500);
    }

    .Section.bp4-size3 {
        padding-top: var(--spacing-800);
        padding-bottom: var(--spacing-800);
    }
}