<template>
  <header class="welcome">
    <div class="welcome__image">
      <picture>
        <source
          srcset="@/assets/viktor-avatar.png?w=400;800&avif&quality=75&srcset"
        />
        <source
          srcset="@/assets/viktor-avatar.png?w=400;800&webp&quality=100&srcset"
        />
        <img src="@/assets/viktor-avatar.png?w=400&png" alt="Viktor Avatar" />
      </picture>
    </div>

    <div class="welcome__heading">
      <h1 class="welcome__mainline">
        <slot name="main"></slot>
      </h1>
      <h2 class="welcome__subline">
        <slot name="sub"></slot>
      </h2>
    </div>
  </header>
</template>

<style lang="scss">
.welcome {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-evenly;
  align-items: var(--welcome-headings-align-items);

  width: 100%;
  max-width: 50rem;

  margin: 0 auto;
  padding: var(--welcome-padding);
  transition: 0.2s ease-out;

  &__image {
    flex: 0 1 15rem;

    background-color: var(--theme-c-desert-sand-translucent);

    border: 0.5rem solid var(--theme-c-walnut-brown);
    border-radius: 2rem;

    transform: scale(0.84) translateX(15%) rotateZ(calc(-1 * (11 * 1deg)));
    transform-origin: 0 100%;

    overflow: hidden;

    img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
      transform: scale(1.2) rotateZ(calc(11 * 1deg));
    }
  }

  &__heading {
    flex: 0 1 auto;
    text-align: var(--welcome-headings-text-align);
    line-height: 1.6;
    transition: 0.2s ease-out;
  }

  &__mainline {
    margin: 1rem 0;
    line-height: 1;
  }
}
</style>
