$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: 20px !default; $desktop-list-padding: 20px !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; }