.section-hero {
  @apply mt-20 bg-primary-100 mb-8 lg:mb-16;

  &__slides {
    @apply w-full h-[calc(100vh-4rem)];
  }

  &__slide {
    @apply flex flex-col-reverse lg:flex-row  gap-0  items-center justify-center py-5 lg:py-10;
    @apply lg:items-center #{!important};
  }

  &__container-contain {
    @apply w-full h-full flex flex-col  gap-3 lg:gap-5 lg:justify-center items-center px-10 lg:pl-20 xl:pl-40;
  }

  &__title {
    @apply text-3xl lg:text-6xl self-start font-bold text-primary-300;
  }

  &__description {
    @apply text-black text-xs md:text-xl;
  }

  &__container-img {
    @apply w-full h-full flex justify-center items-center;
  }

  &__img {
    @apply h-auto px-10 lg:px-10;
  }
}


// articulos merchandising

.section-articles-merchandising {
  @apply container relative h-[1000px] lg:h-full mb-12 lg:mb-0;

  &__content {
    @apply lg:flex flex-col gap-11 hidden;
  }

  &__contentText {
    @apply flex flex-col gap-4 items-center text-center mb-16;
  }

  &__title {
    @apply text-primary-300 text-4xl font-bold max-w-sm;
  }

  &__description {
    @apply font-sans-Anek text-lg;
  }

  &__contCardfirst {
    @apply shadow-articles px-20 py-12 hidden lg:block;
  }

  &__cardfirst {
    @apply flex items-center w-full justify-between;
  }

  &__cardfirstText {
    @apply flex flex-col gap-4 items-start;
  }

  &__cardfirstbtn {
    @apply px-8 py-3 font-bold font-sans-poppins rounded-full flex gap-4 items-center text-white bg-primary-300 transition-colors duration-300 hover:bg-primary-400;
  }

  &__cardfirstfigure {
    @apply lg:block hidden;
  }

  &__cardTitlefirst {
    @apply font-sans-poppins max-w-[90%] text-3xl font-semibold text-primary-300;
  }

  &__contentCard {
    @apply lg:grid lg:grid-cols-[repeat(auto-fit,_minmax(300px,_1fr))] gap-5 mb-16 hidden;
  }

  &__card {
    @apply shadow-articles rounded-lg flex flex-col lg:gap-5 p-8 lg:items-start items-center justify-around h-full;
  }

  &__cardTitle {
    @apply font-sans-poppins text-2xl text-primary-300 font-bold;
  }

  &__contImg {
    @apply w-full lg:flex-1 flex items-center;
  }

  &__img {
    @apply m-auto w-full;
  }

  &__btn {
    @apply px-8 py-3 font-bold font-sans-poppins rounded-full lg:m-auto flex gap-4 items-center text-white bg-primary-300 transition-colors duration-300 hover:bg-primary-400;
  }
}

// Sección vide publicitario
.section-home-video {
  @apply bg-primary-300;

  &__container {
    @apply lg:container mb-12 lg:mb-24  flex flex-col pt-14 pb-20 gap-10 2xl:gap-24 lg:flex-row-reverse items-center;
  }

  &__header {
    @apply container pr-0 lg:px-0;
  }

  &__content {
    @apply bg-primary-100 rounded-l-lg py-10 px-7 flex flex-col gap-1 lg:rounded-r-lg;
  }

  &__video {
    @apply container lg:px-0;
  }

  &__iframe {
    @apply aspect-video w-full rounded-lg h-full;
  }
}

.section-home-national-shipping {
  @apply h-full container mb-12 lg:mb-24;
}

//sección banner
.section-banner {
  @apply mb-16;

  &__contentAll {
    @apply relative flex justify-center items-center  h-[450px];
  }

  &__picture {
    @apply absolute top-0 w-full h-full -z-10;
  }

  &__image {
    @apply w-full h-full;
  }

  &__imgText {
    @apply flex w-full;
  }

  &__imgFigureLeft {
    @apply hidden w-full md:block;
  }

  &__imgLeft {
    @apply m-auto;
  }

  &__contText {
    @apply flex flex-col items-center justify-center w-full gap-5 text-center;
  }

  &__description {
    @apply px-6 text-xl font-bold md:text-2xl lg:px-0 text-primary-300 font-sans-poppins;
  }

  &__subdescription {
    @apply text-xl font-medium md:text-2xl text-primary-300 font-sans-poppins;
  }

  &__link {
    @apply lg:px-8 lg:py-3 py-2 px-6 transition-colors duration-300 hover:bg-primary-400 rounded-full bg-primary-300 font-sans-poppins text-white;
  }

  &__imgFigureRight {
    @apply hidden w-full md:block;
  }

  &__imgRight {
    @apply m-auto;
  }
}

//sección diseño publicitario y personalizado

.section-custom-advertising-design {
  @apply container mb-20 sm:mb-40;

  &__contText {
    @apply flex flex-col items-center gap-4 mb-16 text-center;
  }

  &__title {
    @apply max-w-sm text-4xl font-bold text-primary-300;
  }

  &__description {
    @apply text-base font-sans-Anek;
  }

  &__contCard {
    @apply grid sm:grid-cols-[repeat(auto-fit,_minmax(250px,_1fr))] place-items-center gap-y-20 md:gap-x-12  w-full;
  }

  &__card {
    @apply bg-primary-100  pt-3 pl-6 rounded-2xl relative w-[180px] md:w-[250px] h-[112px] md:h-[150px];
  }

  &__titleCard {
    @apply font-semibold text-primary-300 md:text-lg font-sans-poppins;
  }

  &__img {
    @apply w-full;
  }

  &__cardMagic {
    @apply absolute w-full -bottom-[55%] -right-[40%] sm:-bottom-[60%] sm:-right-[35%];
  }

  &__cardDad {
    @apply absolute w-full -bottom-[60%] -right-[40%] sm:-bottom-[60%] sm:-right-[35%];
  }

  &__cardGift {
    @apply absolute w-full -bottom-[60%] sm:-bottom-[60%] -right-[40%] sm:-right-[35%];
  }

  &__cardChristmas {
    @apply absolute w-full -bottom-[85%] -right-[30%];
  }
}