<template>
  <div v-bind="getAttrs($attrs)" class="home-card-container p-m">
    <slot />
  </div>
</template>

<script>
import { getAttrs } from '@inside-library/helpers/Attrs'

export default {
  name: 'Card',
  methods: {
    getAttrs
  }
}
</script>

<style lang="scss">
.home-card-container {
  background: var(--color-light);
  box-shadow: var(--shadow-default);
  border-radius: var(--radius-s);
  cursor: pointer;

  transition-property: box-shadow;
  transition-timing-function: ease;
  transition-duration: 0.3s;

  &:hover {
    box-shadow: var(--shadow-hover);
  }
}
</style>
