Tags

<div class="tag__wrapper">
  <div class="tag">
    <a href="/structured-finance/covered-bonds">Structured Finance: Covered Bonds</a>
  </div>
</div>

.tag__wrapper {
  margin: var(--tag-wrapper-margin);
  padding: var(--spacing-2) 0;
  border-top: 0.1rem solid var(--border-color);
  border-bottom: 0.1rem solid var(--border-color);
}

.tag {
  margin: var(--tag-margin);
  padding: var(--tag-padding);
  background: var(--tag-background);
  font-size: var(--font-size-2);
  border-radius: var(--border-radius);
  cursor: pointer;
  display: inline-block;
  transition: all 360ms ease;
}

.tag:hover, .tag:focus {
  opacity: 0.8;
}

.tag a {
  color: inherit;
}

.tag a:hover,
.tag a:focus {
  text-decoration: none;
}

/* iPad Portrait  */
@media only screen and (max-width: 768px) {
  .tag__wrapper {
    margin: 1.8rem 0 2.4rem;
  }
}

/* iPhone 6 onwards */
@media only screen and (max-width: 480px) {
  .tag__wrapper {
    margin-bottom: var(--spacing-2);
  }
}

@import '../abstracts/_mixins';

.tag__wrapper {
  margin: var(--tag-wrapper-margin);
  padding: var(--spacing-2) 0;
  border-top: 0.1rem solid var(--border-color);
  border-bottom: 0.1rem solid var(--border-color);
}
.tag {
  margin: var(--tag-margin);
  padding: var(--tag-padding);
  background: var(--tag-background);
  font-size: var(--font-size-2);
  border-radius: var(--border-radius);
  cursor: pointer;
  display: inline-block;
  transition: all 360ms ease;

  &:hover,
  &:focus {
    opacity: 0.8;
  }
  a {
    color: inherit;
  }
  a:hover,
  a:focus {
    text-decoration: none;
  }
}

@include mq-3 {
  .tag__wrapper {
    margin: 1.8rem 0 2.4rem;
  }
}

@include mq-4 {
  .tag__wrapper {
    margin-bottom: var(--spacing-2);
  }
}