<template>
  <div class="welcome">
    <div class="welcome__image">
      <!-- max 500px -->
      <picture>
        <source
          srcset="
            @/assets/sebin-smug-icon.png?w=180;200;240;280;350;400;480;0&avif&quality=75&withoutEnlargement&srcset
          "
          sizes="(min-width: 120em) 280px, (min-width: 80em) 240px, (min-width: 35em) 200px, 180px"
          type="image/avif"
        />
        <source
          srcset="
            @/assets/sebin-smug-icon.png?w=180;200;240;280;350;400;480;0&webp&quality=100&withoutEnlargement&srcset
          "
          sizes="(min-width: 120em) 280px, (min-width: 80em) 240px, (min-width: 35em) 200px, 180px"
          type="image/webp"
        />
        <img
          srcset="
            @/assets/sebin-smug-icon.png?w=180;200;240;280;350;400;480;0&png&withoutEnlargement&srcset
          "
          sizes="(min-width: 120em) 280px, (min-width: 80em) 240px, (min-width: 35em) 200px, 180px"
          alt="Sebin Avatar"
        />
      </picture>
    </div>
    <div class="welcome__headings">
      <h1 class="welcome__mainline">
        <slot name="main"></slot>
      </h1>
      <h2 class="welcome__subline">
        <slot name="sub"></slot>
      </h2>
    </div>
  </div>
</template>

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

  max-width: 40rem;
  margin: 1rem auto;

  &__image {
    flex: 0 0 50vw;
    max-width: 10rem;

    img {
      display: block;
      width: 100%;
      border-radius: 100%;
      border: 0.375rem solid #fff;
      box-shadow: var(--container-box-shadow);
    }
  }

  &__headings {
    flex: 0 0 100%;
    max-width: 23rem;
    margin: var(--welcome-header-headings-margin);
  }

  &__mainline,
  &__subline {
    font-family: 'Exo', sans-serif;
    text-align: center;
    font-style: italic;
    margin: 0;
  }

  &__mainline {
    font-size: var(--welcome-header-mainline-font-size);
    font-weight: 900;
  }

  &__subline {
    font-size: var(--welcome-header-subline-font-size);
    font-weight: 300;
  }
}
</style>
