// Type // # Contents // 1. Typography // 1.1) Headings // 1.2) Anchor // 1.3) Headings // 2. Responsive // 1. Typography // 1.1) Headings h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 { margin-bottom: 1.8rem; color: $headings-text; font-weight: 700; line-height: 1.1; font-family: $second-font-family; } h1, .h1 { font-size: 3.6rem; font-weight: 400; line-height: 1.223; } h2, .h2 { font-size: 3rem; line-height: 1.5; } h3, .h3 { font-size: 2.5rem; line-height: 1.28; } h4, .h4 { font-size: 2rem; line-height: 1.35; } h5, .h5 { font-size: 1.4rem; line-height: 1.429; } h6, .h6 { font-size: 1.3rem; line-height: 1.385; font-weight: 600; } // 1.2) Anchor a { transition: all .3s; color: $primary-color; text-decoration: none; } a:hover, a:focus { color: $primary-color; text-decoration: none; } // 1.3) Headings .heading { margin-bottom: 3rem; color: $primary-color-dark; .title { margin-bottom: 1.6rem; } p { letter-spacing: -.015em; } p:last-child { margin-bottom: 0; } } .light-title { margin-bottom: 2rem; font-weight: 300; } .section-title { text-transform: uppercase; font-size: 1.8rem; } .section-sub-title { font-size: 1.6rem; text-transform: uppercase; } // 2. Responsive @include mq(md) { h1, .h1 { font-size: 4.5rem; } h2, .h2 { font-size: 2.5rem; } .heading { margin-bottom: 4rem; } } @include mq(lg) { h1, .h1 { font-size: 5rem; } h2, .h2 { font-size: 3rem; } .heading { margin-bottom: 5rem; } }