<template>
  <Hero size="l" :slots="[['1fr']]" :tablet-slots="[[]]">
    <template #1-1>
      <div class="modules-container p-xl">
        <Shortcuts class="shortcuts" />

        <FeaturedVideo />
      </div>
    </template>
  </Hero>
</template>

<script>
import { Container } from 'inside-collection/components'

import Hero from '@inside-commons/components/lib/Hero'

import Shortcuts from './sub-components/Shortcuts'
import FeaturedVideo from './sub-components/FeaturedVideo'

export default {
  name: 'HomeHeroModule',
  $_i18nRootPath: 'customs.HOMEPAGE.heromodule',
  components: {
    Container,
    Hero,
    Shortcuts,
    FeaturedVideo
  }
}
</script>

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

.hero-container {
  @include desktop-only {
    padding: 0 !important;
  }

  @include tablet {
    margin-bottom: var(--spacing-l);
  }

  .modules-container {
    @include desktop-only {
      position: relative;
      display: flex;
      justify-content: space-between;
      background-color: rgba(var(--color-light-rgb), 0.6);

      .shortcuts::before {
        position: absolute;
        left: 45%;
        width: 1px;
        height: 85%;
        background: var(--color-dark);
        content: '';

        @include mobile {
          top: 50%;
          left: 7%;
          width: 85%;
          height: 1px;
        }
      }
    }

    @include mobile {
      flex-direction: column;
    }
  }
}
</style>
