$main-overflow: hidden !default;
$section-padding-desktop: 2rem 0 !default;
$section-padding-mobile: 1rem 0 !default;
$link-hover-color: $primary-color !default;
$mobile-list-padding: 10px !default;
$desktop-list-padding: 10px !default;

* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

main { overflow: $main-overflow; }

section {
  padding: $section-padding-mobile;

  @media (min-width: $large) {
    padding: $section-padding-desktop;
  }
}

a {
  color: inherit;
  text-decoration: none;
  transition: 300ms;

  &.link:hover { color: $link-hover-color; }
}

ul,
ol {
  padding-left: $mobile-list-padding;

  @media (min-width: $large) { padding-left: $desktop-list-padding; }

  &.no-style { list-style-type: none; }
  &.circle { list-style-type: circle; }
  &.square { list-style-type: square; }
  &.upper-roman { list-style-type: upper-roman; }
  &.lower-alpha { list-style-type: lower-alpha; }
}

img {
  display: inline-block;
  vertical-align: middle;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
}