/**
 * Responsive Styles
 */
/**
 * Required Variables
 */
/**
 * Root Media Query Variables
 */
:root {
  --responsive--spacing-horizontal: calc(2 * var(--global--spacing-horizontal) * 0.6);
  --responsive--aligndefault-width: calc(100vw - var(--responsive--spacing-horizontal));
  --responsive--alignwide-width: calc(100vw - var(--responsive--spacing-horizontal));
  --responsive--alignfull-width: 100%;
  --responsive--alignright-margin: var(--global--spacing-horizontal);
  --responsive--alignleft-margin: var(--global--spacing-horizontal); }

@media only screen and (min-width: 482px) {
  :root {
    --responsive--aligndefault-width: min(calc(100vw - 4 * var(--global--spacing-horizontal)), 610px);
    --responsive--alignwide-width: calc(100vw - 4 * var(--global--spacing-horizontal));
    --responsive--alignright-margin: calc(0.5 * (100vw - var(--responsive--aligndefault-width)));
    --responsive--alignleft-margin: calc(0.5 * (100vw - var(--responsive--aligndefault-width))); } }
@media only screen and (min-width: 822px) {
  :root {
    --responsive--aligndefault-width: min(calc(100vw - 8 * var(--global--spacing-horizontal)), 610px);
    --responsive--alignwide-width: min(calc(100vw - 8 * var(--global--spacing-horizontal)), 1240px); } }
/**
 * Extends
 */
.default-max-width {
  max-width: var(--responsive--aligndefault-width);
  margin-left: auto;
  margin-right: auto; }

.wide-max-width {
  max-width: var(--responsive--alignwide-width);
  margin-left: auto;
  margin-right: auto; }

@media only screen and (min-width: 482px) {
  .full-max-width {
    max-width: var(--responsive--alignfull-width);
    width: auto;
    margin-left: auto;
    margin-right: auto; } }