@import url("https://pro.fontawesome.com/releases/v6.0.0-beta1/css/all.css");

.ul_ribon {
  --col-gap: 2rem;
  --barH: 1rem;
  --roleH: 6rem;
  --flapH: 2rem;

  margin-inline: auto;

  gap: var(--col-gap);
  padding-inline: calc(var(--col-gap) / 2);

}
.ul_ribon > .li_ribon {
  /* width: 10em; */
  display: grid;
  grid-template:
    "role"
    "icon"
    "title"
    "descr";
  align-items: flex-start;
  gap: 1rem;
  padding-block-end: calc(var(--flapH) + 1rem);
  text-align: center;
  background: var(--accent-color);
  background-image: linear-gradient(
    #545454 var(--roleH),
    #545454 calc(var(--roleH) + 0.5rem + 5rem)
    #545454 calc(var(--roleH) + 0.5rem),
    #545454 calc(var(--roleH) + 0.5rem + 5rem)
  );
  clip-path: polygon(
    calc(var(--col-gap) / -2 - 5px) 0,
    calc(100% + var(--col-gap) / 2 + 5px) 0,
    calc(100% + var(--col-gap) / 2 + 5px ) calc(100% - var(--flapH)),
    50% 100%,
    calc(var(--col-gap) / -2 - 5px) calc(100% - var(--flapH))
  );
}


/* role */
.ul_ribon > li::after {
  content: "";
  grid-area: role;
  background: var(--accent-color);
  background-image: linear-gradient(
    rgba(255, 255, 255, 0.4),
    rgba(255, 255, 255, 0.2) 30%,
    rgba(255, 255, 255, 0.1) 40%,
    rgba(0, 0, 0, 0.1) 60%,
    rgba(0, 0, 0, 0.2) 70%,
    rgba(0, 0, 0, 0.4)
  );
  height: var(--roleH);
}

.ul_ribon > .li_ribon .icon,
.ul_ribon > .li_ribon .title,
.ul_ribon > .li_ribon .descr {
  padding-inline: 1rem;
  color: white;
  text-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.5);
}

.ul_ribon > .li_ribon .icon {
  font-size: 3rem;
}
.ul_ribon > .li_ribon .title {
  font-size: 1.25rem;
  font-weight: 700;
}

.ul_ribon > .li_ribon .descr {
  font-size: 0.9rem;
}

.credits {
  position: fixed;
  bottom: 1rem;
  right: 1rem;
}
.credits a {
  color: var(--color);
}