teaser.scss

.teaser {
  padding: 2em;

  .learn-more {
    border: 1px solid $color-border;
  }

  svg {
    width: 16px;
  }
}

.teaser--small {
  padding: 1em;
}

.teaser__title {
  font-size: 2em;
}

#pagination {
  text-align: center;
}

• BEM (Block Element Modifier) methodology, combined with a style of nesting that is characteristic of preprocessors like Sass or modern native CSS nesting. The use of class names like .teaser__title (block__element) and .teaser--small (block--modifier) is a hallmark of BEM, which helps organize and scale CSS

.teaser {
padding: 2em;

&__learn-more {
border: 1px solid $color-border;
}

&__title {
font-size: 2em;
}

&__icon {
width: 16px;
}

&--small {
padding: 1em;
}
}