Eyecatcher: Default

.eyecatcher {
  $root: &;

  position: relative;
  float: left;
  margin: 0 4.8rem $paragraph-margin 0;
  border-style: solid;

  &:last-child {
    margin-bottom: 0;
  }

  &::after {
    content: '';
    display: block;
    padding-bottom: 100%;
  }

  &__content {
    position: absolute;
    width: 100%;
    height: 100%;
    overflow: hidden;
  }

  &.-float-right {
    float: right;
    margin: 0 0 $paragraph-margin 4.8rem;
  }

  &.-size-s {
    width: rem-calc(150px);
    border-width: 6px;

    #{$root}__content {
      @include typography-level('heading-3');

      padding: 1.2rem;
    }
  }

  &.-size-m {
    width: rem-calc(175px);
    border-width: 7px;

    #{$root}__content {
      @include typography-level('heading-3');

      padding: 1.4rem;
    }
  }

  &.-size-l {
    width: rem-calc(200px);
    border-width: 8px;

    #{$root}__content {
      @include typography-level('heading-2');

      padding: 1.6rem;
    }
  }

  &.-clr-primary {
    border-color: $primary;
    color: $primary;
  }

  &.-clr-secondary {
    border-color: $secondary;
    color: $secondary;
  }

  &.-clr-white {
    border-color: $white;
    color: $white;
  }

  &.-clr-black {
    border-color: $black;
    color: $black;
  }
}