<template>
  <h1>
    <span class="bar" />
    <span class="title">
      <slot />
    </span>
    <span class="bar" />
  </h1>
</template>

<script>
export default {
  name: 'content-title-ged'
}
</script>

<style lang="scss" scoped>
@use '@inside-library/styles/mixins/partials/common-mixin' as *;

$padding: 40px;

h1 {
  text-align: center;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 26px;

  .title {
    font-weight: 600;
    flex: none;

    @include fontSize(36);

    @include mobile {
      width: 100%;
      text-align: center;
    }
  }

  .bar {
    width: 50%;
    height: 1px;
    background: rgba(black, 0.4);

    &:first-of-type {
      margin-right: $padding;
    }

    &:last-of-type {
      margin-left: $padding;
    }

    @include mobile {
      display: none;
    }
  }
}
</style>
