/**
 * @file
 * Shared layout/spacing utility classes.
 */

:root {
  --sc-sec-pad: 3rem;
  --sc-edgepad: 9rem;
}

.sec-spacer {
  padding-top: var(--sc-sec-pad);
  padding-bottom: var(--sc-sec-pad);
}

.sec-spacer-top {
  padding-top: var(--sc-sec-pad);
}

.sec-spacer-bottom {
  padding-bottom: var(--sc-sec-pad);
}

.sec-spacer-double {
  padding-top: calc(2 * var(--sc-sec-pad));
  padding-bottom: calc(2 * var(--sc-sec-pad));
}

.sec-spacer-top-double {
  padding-top: calc(2 * var(--sc-sec-pad));
}

.sec-spacer-bottom-double {
  padding-bottom: calc(2 * var(--sc-sec-pad));
}

.edge-pad {
  padding-left: var(--sc-edgepad);
  padding-right: var(--sc-edgepad);
}

.edge-pad-lg {
  padding-left: calc(1.5 * var(--sc-edgepad));
  padding-right: calc(1.5 * var(--sc-edgepad));
}

.edge-pad-xl {
  padding-left: calc(2 * var(--sc-edgepad));
  padding-right: calc(2 * var(--sc-edgepad));
}

.edge-pad-xxl {
  padding-left: calc(3 * var(--sc-edgepad));
  padding-right: calc(3 * var(--sc-edgepad));
}

.edge-margin {
  margin-left: var(--sc-edgepad);
  margin-right: var(--sc-edgepad);
}

/* Responsive spacing values from Matt Casson. */
@media (max-width: 1600px) {
  :root {
    --sc-sec-pad: 3rem;
    --sc-edgepad: 3rem;
  }
}

@media (max-width: 1400px) {
  :root {
    --sc-sec-pad: 3rem;
    --sc-edgepad: 3rem;
  }
}

@media (max-width: 1200px) {
  :root {
    --sc-sec-pad: 2.5rem;
    --sc-edgepad: 2.5rem;
  }
}

@media (max-width: 992px) {
  :root {
    --sc-sec-pad: 2rem;
    --sc-edgepad: 2rem;
  }
}

@media (max-width: 768px) {
  :root {
    --sc-sec-pad: 1rem;
    --sc-edgepad: 2rem;
  }

  .edge-pad-lg,
  .edge-pad-xl {
    padding-left: var(--sc-edgepad);
    padding-right: var(--sc-edgepad);
  }
}