:root {
    --frame--space-mobile: 40px;
    --frame--space-tablet: 55px;
    --frame--space-desktop: 70px;
}

.frame-space-before-extra-small {
    margin-top: calc(var(--frame--space-mobile) * 0.5);
}

.frame-space-before-small {
    margin-top: calc(var(--frame--space-mobile) * 0.75);
}

.frame-space-before-medium {
    margin-top: var(--frame--space-mobile);
}

.frame-space-before-large {
    margin-top: calc(var(--frame--space-mobile) * 1.5);
}

.frame-space-before-extra-large {
    margin-top: calc(var(--frame--space-mobile) * 2);
}

.frame-space-after-extra-small {
    margin-bottom: calc(var(--frame--space-mobile) * 0.5);
}

.frame-space-after-small {
    margin-bottom: calc(var(--frame--space-mobile) * 0.75);
}

.frame-space-after-medium {
    margin-bottom: var(--frame--space-mobile);
}

.frame-space-after-large {
    margin-bottom: calc(var(--frame--space-mobile) * 1.5);
}

.frame-space-after-extra-large {
    margin-bottom: calc(var(--frame--space-mobile) * 2);
}

@media screen and (min-width: 768px) {
    .frame-space-before-extra-small {
        margin-top: calc(var(--frame--space-tablet) * 0.5);
    }

    .frame-space-before-small {
        margin-top: calc(var(--frame--space-tablet) * 0.75);
    }

    .frame-space-before-medium {
        margin-top: var(--frame--space-tablet);
    }

    .frame-space-before-large {
        margin-top: calc(var(--frame--space-tablet) * 1.5);
    }

    .frame-space-before-extra-large {
        margin-top: calc(var(--frame--space-tablet) * 2);
    }

    .frame-space-after-extra-small {
        margin-bottom: calc(var(--frame--space-tablet) * 0.5);
    }

    .frame-space-after-small {
        margin-bottom: calc(var(--frame--space-tablet) * 0.75);
    }

    .frame-space-after-medium {
        margin-bottom: var(--frame--space-tablet);
    }

    .frame-space-after-large {
        margin-bottom: calc(var(--frame--space-tablet) * 1.5);
    }

    .frame-space-after-extra-large {
        margin-bottom: calc(var(--frame--space-tablet) * 2);
    }
}

@media screen and (min-width: 1280px) {
    .frame-space-before-extra-small {
        margin-top: calc(var(--frame--space-desktop) * 0.5);
    }

    .frame-space-before-small {
        margin-top: calc(var(--frame--space-desktop) * 0.75);
    }

    .frame-space-before-medium {
        margin-top: var(--frame--space-desktop);
    }

    .frame-space-before-large {
        margin-top: calc(var(--frame--space-desktop) * 1.5);
    }

    .frame-space-before-extra-large {
        margin-top: calc(var(--frame--space-desktop) * 2);
    }

    .frame-space-after-extra-small {
        margin-bottom: calc(var(--frame--space-desktop) * 0.5);
    }

    .frame-space-after-small {
        margin-bottom: calc(var(--frame--space-desktop) * 0.75);
    }

    .frame-space-after-medium {
        margin-bottom: var(--frame--space-desktop);
    }

    .frame-space-after-large {
        margin-bottom: calc(var(--frame--space-desktop) * 1.5);
    }

    .frame-space-after-extra-large {
        margin-bottom: calc(var(--frame--space-desktop) * 2);
    }
}