.iconBox {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  padding: calc(#{$spacing-md} + 2.5%) $spacing-xs;
  margin: 0 0 $spacing-md;
  background: $neutral--primary;
  color: white;
  text-decoration: none;

  // --

  &__icon {
    flex: 1 1 $spacing-3xl;
    padding: 0 calc(#{$spacing-xs} + 1.25%);
    box-sizing: border-box;
    @include typescale('3xl');
    text-align: center;

    .icon, img {
      display: block;
      margin: auto auto $spacing-lg;
    }
  }

  &__content {
    flex: 1 1 80%;
    padding: 0 calc(#{$spacing-xs} + 1.25%);
    box-sizing: border-box;

    > :first-child {
      margin-top: 0;
    }

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

  &__title {
    margin: 0 0 $spacing-sm;
    opacity: 0.75;
  }

  // --

  &--facebook {
    background: $blue--facebook;
    color: white;
  }

  &--twitter {
    background: $blue--twitter;
    color: white;
  }
}

a.iconBox {
  &:hover {
    color: white;

    .iconBox__title {
      color: white;
      text-decoration: underline;
    }
  }
}