/* docs has its own style */
.content-wrapper {
    display: grid;
    align-items: center;
    justify-content: center;
    align-self: start;
    padding: 0 var(--gap-default) 32px var(--gap-default);
    margin: 0 auto auto auto;
    max-width: var(--max-width);
    margin-top: var(--gap-xx-small);
}

.content {
    display: grid; /* fixes margin bugs? */
    width: unset;
}

/* top padding */
.top-gap-large {
    padding: var(--gap-large);
}
.top-gap-med {
    padding: var(--gap-med);
}
.top-gap-default {
    padding: var(--gap-default);
}
.top-gap-small {
    padding: var(--gap-small);
}
.top-gap-x-small {
    padding: var(--gap-x-small);
}
.top-gap-xx-small {
    padding: var(--gap-xx-small);
}
.top-gap-micro {
    padding: var(--gap-micro);
}

/* bottom padding */
.bottom-gap-large {
    padding: var(--gap-large);
}
.bottom-gap-med {
    padding: var(--gap-med);
}
.bottom-gap-default {
    padding: var(--gap-default);
}
.bottom-gap-small {
    padding: var(--gap-small);
}
.bottom-gap-x-small {
    padding: var(--gap-x-small);
}
.bottom-gap-xx-small {
    padding: var(--gap-xx-small);
}
.bottom-gap-micro {
    padding: var(--gap-micro);
}

/* encircled padding */
.padding-x-large {
    padding: var(--encircle-x-large);
}
.padding-large {
    padding: var(--encircle-large);
}
.padding-default {
    padding: var(--encircle-default);
}