:root {
  --barvaRub: #965E8B; /* výchozí - fialová */
  --barvaLic: #CE80C1; /* výchozí - fialová */

  --modryRub: #267694;
  --modryLic: #6ed0f6;

  --zlutyRub: #bbad20;
  --zlutyLic: #ebf232;

  --zelenyRub: #278c3b;
  --zelenyLic: #6cf67d;
  
  --cervenyRub: #CC1A4C;
  --cervenyLic: #FF6699;
}

/* common */
.ribbon {
  width: 80px;
  height: 80px;
  overflow: hidden;
  position: absolute;
}
.ribbon::before,
.ribbon::after {
  position: absolute;
  z-index: -1;
  content: '';
  display: block;
  border: 5px solid var(--barvaRub);
}
.ribbon span {
  position: absolute;
  display: block;
  width: 180px;
  padding: 3px 0;
  background-color: var(--barvaLic);
  box-shadow: 0 5px 10px rgba(0,0,0,.1);
  color: #fff;
  text-shadow: 0 1px 1px rgba(0,0,0,.2);
  text-transform: uppercase;
  text-align: center;
  font-size: 12px;
  /* opacity: 0.85; */
}

/* barvy */
.zeleny::before,
.zeleny::after {border: 5px solid var(--zelenyRub);}
.zeleny span {background-color: var(--zelenyLic);}

.zluty::before,
.zluty::after {border: 5px solid var(--zlutyRub);}
.zluty span {background-color: var(--zlutyLic);}

.modry::before,
.modry::after {border: 5px solid var(--modryRub);}
.modry span {background-color: var(--modryLic);}

.cerveny::before,
.cerveny::after {border: 5px solid var(--cervenyRub);}
.cerveny span {background-color: var(--cervenyLic);}

/* top left */
.ribbon-top-left {
  margin-top: -10px;
  margin-left: -10px;
}
.ribbon-top-left::before,
.ribbon-top-left::after {
  border-top-color: transparent;
  border-left-color: transparent;
}
.ribbon-top-left::before {
  top: 0;
  right: 0;
}
.ribbon-top-left::after {
  bottom: 0;
  left: 0;
}
.ribbon-top-left span {
  right: -42px;
  top: 23px;
  transform: rotate(-45deg);
}

/* top right */
.ribbon-top-right {
  margin-top: -10px;
  margin-right: -10px;
}
.ribbon-top-right::before,
.ribbon-top-right::after {
  border-top-color: transparent;
  border-right-color: transparent;
}
.ribbon-top-right::before {
  top: 0;
  left: 0;
}
.ribbon-top-right::after {
  bottom: 0;
  right: 0;
}
.ribbon-top-right span {
  left: -40px;
  top: 25px;
  transform: rotate(45deg);
}

/* bottom left */
.ribbon-bottom-left {
  margin-bottom: -10px;
  margin-left: -10px;
}
.ribbon-bottom-left::before,
.ribbon-bottom-left::after {
  border-bottom-color: transparent;
  border-left-color: transparent;
}
.ribbon-bottom-left::before {
  bottom: 0;
  right: 0;
}
.ribbon-bottom-left::after {
  top: 0;
  left: 0;
}
.ribbon-bottom-left span {
  right: -40px;
  bottom: 25px;
  transform: rotate(225deg);
}

/* bottom right */
.ribbon-bottom-right {
  margin-bottom: -10px;
  margin-right: -10px;
}
.ribbon-bottom-right::before,
.ribbon-bottom-right::after {
  border-bottom-color: transparent;
  border-right-color: transparent;
}
.ribbon-bottom-right::before {
  bottom: 0;
  left: 0;
}
.ribbon-bottom-right::after {
  top: 0;
  right: 0;
}
.ribbon-bottom-right span {
  left: -40px;
  bottom: 25px;
  transform: rotate(-225deg);
}