site_logiciels/components/Logiciels/Title.vue

<template>
  <LayoutContainer>
    <div class="container-title">
      <v-col v-if="mdAndUp" cols="3" class="lateral-text">
        <span>
          <slot name="left-text" />
        </span>
      </v-col>
      <v-col cols="12" md="6">
        <h1>
          <slot />
        </h1>
      </v-col>
      <v-col v-if="mdAndUp" cols="3" class="lateral-text">
        <span>
          <slot name="right-text" />
        </span>
      </v-col>
    </div>
  </LayoutContainer>
</template>

<script setup lang="ts">
import { useDisplay } from 'vuetify'

const { mdAndUp } = useDisplay()
</script>

<style scoped lang="scss">
.container-title {
  display: flex;
  justify-content: space-around;
  line-height: 16px;
  align-items: center;
  text-align: center;
  letter-spacing: 0.18em;
}

h1 {
  font-size: 72px;
  line-height: 77px;
  color: var(--on-neutral-color);
  text-align: center;
  white-space: nowrap;

  @media (max-width: 600px) {
    font-size: 42px;
    line-height: 46px;
  }
}

.lateral-text {
  position: absolute;
  font-weight: 600;
  font-size: 72px;
  line-height: 85px;
  opacity: 0.08;
  margin-top: 2rem;
  margin-bottom: 2rem;
}

.lateral-text:first-child {
  left: -10rem;
}

.lateral-text:last-child {
  right: -10rem;
}
</style>