<template>
  <div class="features-container min-h-332px bg-white lg:p-24px lg:pb-44px rounded-16px lg:w-[23.7288%] <lg:p-24px <lg:max-w-268px <lg:min-h-320px <lg:h-full">
    <slot></slot>
    <div class="mb-8px text-20px leading-24px text-[#3C4247] font-bold lg:mt-24px <lg:mt-12px <lg:mb-8px <lg:text-left"><slot name="title" /></div>
    <div class="text-[#606972] lg:text-tiny <lg:text-16px <lg:leading-24px"><slot name="desc" /></div>
  </div>
</template>

<style lang="scss" scoped>
  .features-container {
     box-shadow: 0px 10px 35px rgba(186, 186, 186, 0.25);
     img {
       width: 84px;
     }
   }
  @media screen and (max-width: 930px) {
    .features-container img {
      width: 70px;
    }
  }
</style>
