.right-extra-content {
  background: var(--theme-color-950c);
  grid-area: right-extra-content;
  border-radius: var(--border-radius-xs);
  height: inherit;
}

.right-extra-content-title {
  font-family: var(--font-titles);
  font-size: var(--font-size-xl);
  margin: 0 var(--margin-s);
  color: var(--theme-color-200);
  background-image: linear-gradient(
    10deg,
    rgb(92, 137, 209) 0%,
    rgb(49, 135, 178) 10%,
    transparent 90%,
    transparent 100%
  );
  background-size: 60% 5%;
  background-repeat: no-repeat;
  background-position: left 4% bottom 0%;
  padding: var(--padding-xs);
}

.right-extra-container {
  padding: var(--padding);
  margin: auto;
}
.right-extra-content-details--title {
  font-family: var(--font-titles);
  font-size: var(--font-size-xl);
  text-align: center;
}
.right-extra-content-cover {
  padding: 0 var(--padding-xs);
}

.right-extra-content-cover img {
  text-align: center;
  margin: auto;
  box-shadow: 0 0 15px 0px var(--theme-color-200c);
}

.right-extra-content-cover img:hover {
  box-shadow: 0 0 20px 0px var(--theme-color-500);
  cursor: pointer;
}
.right-extra-content-details {
  font-size: var(--font-size-s);
  text-align: left;
  padding: var(--padding-s);
  color: var(--white);
}

.right-extra-content-details--genres {
  font-size: var(--font-size-xs);
  margin-top: var(--margin-xs);
  text-align: center;
}

.right-extra-content-details--genres span {
  background-color: var(--theme-color-700);
  padding: var(--padding-xxs) var(--padding-xs);
}

.right-extra-content-details--description {
  margin-top: var(--margin-s);
  display: -webkit-box;
  max-width: 100%;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: left;
  text-align: justify;
}

.right-extra-content-details--views {
  font-size: var(--font-size-xs);
  margin-top: var(--margin);
}