.tags_cloud {

&--colorless {
  .tag {
    background: #eee;
    color: #4b2e39;

    &--ruby { color: #9b111e; }
    &--practical { color: #00a550; }
    &--phoenix { color: #ff9900; }
    &--rails { color: #f80000; }
    &--beginner { color: #00bfff; }
    &--advanced { color: #ff0000; }
    &--overview { color: #7fc7ff; }
    &--docker { color: #1488c6; }
    &--howto { color: #2e852e; }
    &--deploy { color: #4d220e; }
  }
}

&--inline {
  margin-left: 1em;
}

&__list {
  display: inline-block;
  text-align: center;
  margin: 3px 0 12px;
  padding: 0;
}

}

.tag {

color: #fff;
background: #4b2e39;
padding: 3px 6px;
border-radius: 3px;
text-transform: uppercase;
font-size: 0.9em;
margin-bottom: 4px;
display: inline-block;

&:hover,
&:focus {
  text-decoration: none;
  opacity: 0.75;
}

&--ruby { background: #9b111e; }
&--practical { background: #00a550; }
&--phoenix { background: #ff9900; }
&--rails { background: #f80000; }
&--beginner { background: #00bfff; }
&--advanced { background: #ff0000; }
&--overview { background: #7fc7ff; }
&--docker { background: #1488c6; }
&--howto { background: #2e852e; }
&--deploy { background: #4d220e; }

}

@media (min-width: $mobile) { }