/**
 * 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).
 *
 */

.<%= blockClassName %> {

  &__header {
    // Header Mobile.

    @media (min-width: 1024px) {
      // Header Desktop.
    }

    &-heading {
      // Child Element.
    }
  }

  &__visual {
    &-image {
      // Example of BEM usage.
    }
  }

  &__content {

  }

  &__footer {

  }

}