This is a Heading

Article

Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit delectus ratione ducimus repudiandae eligendi, deserunt fuga, sequi facere quas omnis, fugiat rerum tempore!
Asperiores fugiat suscipit minus necessitatibus aliquam magni voluptate exercitationem doloribus consectetur error, id ducimus nam vero? Tempore assumenda esse voluptates obcaecati soluta quod ipsam, omnis in doloremque!

Article

Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla exercitationem alias natus esse, minus sed incidunt ullam doloribus iure eius!

Article

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Voluptatibus modi voluptate harum facere odit a accusantium velit nesciunt! Dolorum pariatur odio, accusamus repudiandae quaerat maxime provident dolorem maiores asperiores facere est ea natus quo molestiae voluptas libero. Suscipit, neque molestiae.

@import 'colors'; @import 'typo'; @mixin headfootflex { background-color: $primary-color; color: $text; display: flex; align-items: center; justify-content: space-between; padding: 0 20px; } * { box-sizing: border-box; margin: 0; padding: 0; } body { background-color: $background; font-family: $font-primary; } header { @include headfootflex(); h1 { margin: 20px; } ul { display: flex; list-style-type: none; margin: 20px; li { padding: 20px; } } a { color: $text; text-decoration: none; &:hover { color: #1975ff; } } } main { display: grid; grid-template-columns: 2fr 1fr; } article { font-family: $font-secondary; background-color: $text; color: $primary-color; margin: 30px; padding: 30px; border-radius: 10px; h2 { margin-bottom: 15px; border-bottom: 1px dashed #333; } } aside { @extend article; } footer { @extend header; span { margin: 20px; } } @import 'media'; $primary-color: #000; $background: #333; $text: #fff; $font-primary: 'Open Sans', sans-serif; $font-secondary: 'Roboto', sans-serif; @media only screen and (max-width: 600px) { //koska footer perii (@extend) kaikki header-tyylit, nämä mediatyylitkin periytyvät footerille automaattisesti header { flex-direction: column; justify-content: center; } main { grid: none; } aside { margin-top: 5px; } } * { box-sizing: border-box; margin: 0; padding: 0; } body { background-color: #333; font-family: "Open Sans", sans-serif; } header, footer { background-color: #000; color: #fff; display: flex; align-items: center; justify-content: space-between; padding: 0 20px; } header h1, footer h1 { margin: 20px; } header ul, footer ul { display: flex; list-style-type: none; margin: 20px; } header ul li, footer ul li { padding: 20px; } header a, footer a { color: #fff; text-decoration: none; } header a:hover, footer a:hover { color: #1975ff; } main { display: grid; grid-template-columns: 2fr 1fr; } article, aside { font-family: "Roboto", sans-serif; background-color: #fff; color: #000; margin: 30px; padding: 30px; border-radius: 10px; } article h2, aside h2 { margin-bottom: 15px; border-bottom: 1px dashed #333; } footer span { margin: 20px; } @media only screen and (max-width: 600px) { header, footer { flex-direction: column; justify-content: center; } main { grid: none; } aside { margin-top: 5px; } }