$breakpoint: 700px; $subtle: $text-dark-grey; $default-size: 16px; $smaller: .9em; $default-margin: 16px; // Will be 1rem once the default-size will be set on $double-margin: $default-margin * 2; $triple-margin: $default-margin * 3; $radius: 4px; .modern-design { font-size: $default-size; // Style h1 { font-size: 3em; margin: $double-margin 0; @media screen and (max-width: $breakpoint) { font-size: 2em; margin: $default-margin 0; } } section { margin-bottom: $double-margin; } section:last-child { margin-bottom: 0; } .advice { color: $subtle; font-size: $smaller; font-style: italic; } // End of style // Layout // This cleans the famous children "margin-top" problem .small-container::before, .small-container::after { content: ' '; display: table; } .small-container { margin: auto; max-width: 800px; @media screen and (max-width: $breakpoint) { padding: 10px; } } .flex-container { display: flex; justify-content: space-between; } // End of layout }