/**
 * Use "rem" instead of pixels. 1rem = 16pixels
 *    No need to use rem in situations of "1px". (usually used for borders width).
 *
 * Use BEM naming system for class names: http://getbem.com/naming/
 *
 * Use Mobile First approach.
 *    Start with mobile device styling and then focus on other screen sizes by using @media (min-width: ...px).
 *
 */

.template {
  padding: 1rem;

  // EXAMPLE OF BREAKPOINTS

  @media (min-width: 600px) {
    // Tablet
  }

  @media (min-width: 980px) {
    // Large Tablet
  }

  @media (min-width: 1024px) {
    // Laptop & Tablet
  }

  @media (min-width: 1336px) {
    // Laptop
  }

  @media (min-width: 1680px) {
    // Desktop
  }

  &__header {
    border-bottom: 2px solid green;

    &-heading {
      // Heading
    }
  }

  &__content {
    // Content
  }
}