OpenVisor-Website/src/components/row1.vue

<template>
  <div class="row1-row1 character-row">
    <section class="card">
      <div class="character-header">
        <img :alt="image_alt" :src="image_src" class="row1-image" />
        <div class="character-description">
          <h1 class="row1-header">{{ Header }}</h1>
          <h1 class="row1-header1">
            <span>
              Leitung der Justizvollzugsanstalt
              <span v-html="rawl84z"></span>
            </span>
            <br />
          </h1>
        </div>
        <div></div>
      </div>
      <p class="row1-trigger">
        <span>OT-Trigger:  Tod</span>
        <br />
      </p>
      <p class="row1-themes">{{ Themes }}</p>
      <p class="row1-description">
        <span>
          Fortier (gesprochen &quot;Fortjeeh&quot;) übernahm vor 3 Jahren das
          Gefängnis Schwarzbach, nachdem die vorherige Leitung aus ungeklärten
          Gründen zurücktrat. Kurz nach Fortiers Übernahme kam es im Gefängnis zum
          Mord des Häftlings Sadowski durch Rodriguez.
        </span>
        <br />
        <br />
        <span>
          Fortier ist im Bunker weiterhin für das Gefängnispersonal zuständig
          leitet den Bunker mit Dr. Bellucci und Wm Sartre.
        </span>
        <br />
        <br />
        <span>
          Fortier ist bekannt dafür, schnell irritiert und sehr direkt zu sein.
          urz nach Fortiers Übernahme kam es im Gefängnis zum Mord des Häftlings
          Sadowski durch Rodriguez.
        </span>
      </p>
    </section>
    <section class="card">
      <div class="character-header">
        <img :alt="image_alt1" :src="image_src1" class="row1-image1" />
        <div class="character-description">
          <h1 class="row1-header2">
            <span>Dr. Bellucci</span>
            <br />
          </h1>
          <h1 class="row1-header3">
            <span>Psychologische Sachverständigung</span>
            <br />
          </h1>
        </div>
        <div></div>
      </div>
      <p class="row1-trigger1">
        <span>OT-Trigger:  Kindertod</span>
        <br />
      </p>
      <p class="row1-themes1">{{ Themes1 }}</p>
      <p class="row1-description1">
        <span>
          Dr. Bellucci (gesprochen &quot;Beluhtschi&quot;) wurde vor 2 Jahren
          psychologische Sachverständigung im Gefängnis, als Rodriguez Sadowski
          ermordete. Belluccis Aufgabe war langfristige Massnahmen zu entwickeln,
          um dies in Zukunft zu verhindern.
        </span>
        <br />
        <br />
        <span>
          Dr. Bellucci (gesprochen &quot;Beluhtschi&quot;) wurde vor 2 Jahren
          psychologische Sachverständigung im Gefängnis, als Rodriguez Sadowski
          ermordete. Belluccis Aufgabe war langfristige Massnahmen zu entwickeln,
          um dies in Zukunft zu verhindern.
        </span>
        <br />
        <br />
        <span>
          Bellucci führt verschiedene Therapien mit den Bunkerinsassen durch um
          diese bei Verstand zu halten. Bellucci führt mit Dr. Jankovic täglich
          Checkups an allen Bewohnern durch, auch gegenseitig. Bellucci berät
          Fortier mit Jankovic.
        </span>
      </p>
    </section>
  </div>
</template>

<script>
export default {
  name: 'Row1',
  props: {
    image_alt1: {
      type: String,
      default: 'image',
    },
    Themes: {
      type: String,
      default: 'Themes: Macht, Gewissensbisse, Ängste',
    },
    image_src: {
      type: String,
      default: '/Charaktere/aubert-200h.png',
    },
    Themes1: {
      type: String,
      default: 'Themes: Trauma, Manipulation, Suche, Schuld',
    },
    image_src1: {
      type: String,
      default: '/Charaktere/bellucci-200h.png',
    },
    image_alt: {
      type: String,
      default: 'image',
    },
    Header: {
      type: String,
      default: 'Fortier',
    },
  },
  data() {
    return {
      rawl84z: ' ',
    }
  },
}
</script>

<style scoped>
.row1-row1 {
  position: relative;
}
.row1-image {
  width: 160px;
  object-fit: cover;
}
.row1-header {
  color: rgb(255, 255, 255);
  font-size: 24px;
  font-style: normal;
  font-family: Poppins;
  font-weight: 600;
  line-height: 36px;
}
.row1-header1 {
  color: rgb(255, 255, 255);
  font-size: 18px;
  font-style: normal;
  text-align: center;
  font-family: Poppins;
  font-weight: 500;
}
.row1-trigger {
  color: rgb(255, 255, 255);
  font-size: 20px;
  font-family: Poppins;
  line-height: 28px;
}
.row1-themes {
  color: rgb(255, 255, 255);
  font-size: 20px;
  font-family: Poppins;
  line-height: 28px;
}
.row1-description {
  color: rgb(255, 255, 255);
  font-size: 18px;
  font-family: Poppins;
  line-height: 28px;
}
.row1-image1 {
  width: 160px;
  object-fit: cover;
}
.row1-header2 {
  color: rgb(255, 255, 255);
  font-size: 24px;
  font-style: normal;
  font-family: Poppins;
  font-weight: 600;
  line-height: 36px;
}
.row1-header3 {
  color: rgb(255, 255, 255);
  font-size: 18px;
  font-style: normal;
  text-align: center;
  font-family: Poppins;
  font-weight: 500;
}
.row1-trigger1 {
  color: rgb(255, 255, 255);
  font-size: 20px;
  font-family: Poppins;
  line-height: 28px;
}
.row1-themes1 {
  color: rgb(255, 255, 255);
  font-size: 20px;
  font-family: Poppins;
  line-height: 28px;
}
.row1-description1 {
  color: rgb(255, 255, 255);
  font-size: 18px;
  font-family: Poppins;
  line-height: 28px;
}
@media(max-width: 991px) {
  .row1-description {
    color: rgb(255, 255, 255);
    font-size: 18px;
    font-family: Poppins;
    line-height: 28px;
  }
}
@media(max-width: 767px) {
  .row1-description {
    color: rgb(255, 255, 255);
  }
  .row1-description1 {
    color: rgb(255, 255, 255);
    font-size: 18px;
    font-family: Poppins;
    line-height: 28px;
  }
}
@media(max-width: 479px) {
  .row1-trigger {
    font-size: 18px;
  }
  .row1-themes {
    font-size: 18px;
  }
  .row1-description {
    color: rgb(255, 255, 255);
    font-size: 18px;
    font-family: Poppins;
    line-height: 28px;
  }
  .row1-trigger1 {
    font-size: 18px;
  }
  .row1-themes1 {
    font-size: 18px;
  }
  .row1-description1 {
    color: rgb(255, 255, 255);
    font-size: 18px;
    font-family: Poppins;
    line-height: 28px;
  }
}
</style>