.ribbon {
  @apply w-8 py-4 absolute top-0 bg-[var(--rb-tag-second-background-color)] text-[var(--rb-tag-second-color)] z-10 [writing-mode:vertical-lr]
  flex justify-center items-center uppercase text-xs font-bold;
}

.ribbon::after {
  @apply content-[''] absolute -bottom-4 border-16 border-[var(--rb-tag-second-background-color)] border-b-transparent;
}

.ribbon:nth-child(1) {
  @apply left-2;
}

.ribbon:nth-child(2) {
  @apply left-14;
}

.ribbon:nth-child(3) {
  @apply left-26;
}

.ribbon-sold,
.ribbon-rented {
  @apply bg-[var(--rb-sold-tag-background-color)] text-[var(--rb-sold-tag-color)];
}

.ribbon-sold::after,
.ribbon-rented::after {
  @apply border-[var(--rb-sold-tag-background-color)] border-b-transparent;
}

.ribbon-for-sale,
.ribbon-for-rent {
  @apply bg-[var(--rb-for-sale-tag-background-color)] text-[var(--rb-for-sale-tag-color)];
}

.ribbon-for-sale::after,
.ribbon-for-rent::after {
  @apply border-[var(--rb-for-sale-tag-background-color)] border-b-transparent;
}

.ribbon-open-house {
  @apply bg-[var(--rb-openhouse-tag-background-color)] text-[var(--rb-openhouse-tag-color)];
}

.ribbon-open-house::after {
  @apply border-[var(--rb-openhouse-tag-background-color)] border-b-transparent;
}