.production-title {
  position: relative;
  min-height: 35vh;
  /* padding-left: var(--v-padding-x-normal); */
  background: #eee;
  display: flex;
  align-items: center;

  box-sizing: border-box;
}

.production-title.loaded {
  background: url("/src/default/sk-banner01.png") center left / cover no-repeat;
}

.production-title .description {
  position: absolute;
  font-size: var(--v-xlarge-font-size);
  font-weight: 700;
  color: #333;

  width: 100%;
  padding: 0 10px;
}

.production-title .description p {
  line-height: 1.2;
  max-width: var(--v-max-width-normal);
  margin: auto;
}

.production-content {
  padding: 0.9em 10px;

  max-width: var(--v-max-width-normal);
  margin: auto;
}

.production-content .title {
  position: relative;
  display: inline-block;
  inline-size: 100%;

  font-size: var(--v-large-font-size);
  font-weight: 700;
  padding-bottom: 5px;
}

.production-content .underline {
  position: absolute;
  inset-inline-start: 0;
  inset-block-end: -3px;
  inline-size: 100%;
  block-size: 3px;
  background-color: #b4423e;
}

.production-content .underline::after {
  content: "";
  position: absolute;
  inset-inline-start: 20%;
  inline-size: 80%;
  block-size: 3px;
  background-color: #333;
  inset-block-end: 0;
}

.production-content .details-content {
  padding-top: 20px;
  font-size: var(--v-normal-font-size);
}

.production-content .details-content div {
  display: block;
}

.production-content .details-content img {
  max-width: 100%;
}

/* .production-content .details-content div p{
  
} */


@media (max-width: 768px) {
  .production-title {
    min-height: 25vh;
  }

  .production-content {
    padding: 0.9em var(--v-padding-x-normal);
  }
}