Feature

.Feature {
  @apply overflow-hidden
    not-last:mb-4
    not-last:lg:mb-8
    border
    border-gray-300
    rounded-md;

  > a {
    @apply grid 
      grid-cols-12;
  }

  &__aside {
    @apply bg-gray-200;
  }

  &__title {
    @apply mb-0;
  }

  &__copy {
    @apply text-black;
  }

  &--image {
    .Feature__aside {
      @apply col-span-12
        sm:col-span-4
        max-sm:pb-[56.25%]
        bg-no-repeat
        bg-cover
        bg-center;
    }

    .Feature__main {
      @apply col-span-12
        sm:col-span-8;
    }

    .Feature__copy {
      @apply p-4
        sm:p-8
        xl:py-10;
    }

    .Feature__footer {
      @apply flex
        justify-between
        items-stretch
        pl-4
        sm:pl-8
        bg-gray-200;
    }

    .Feature__action {
      @apply flex
        items-center
        px-4
        text-gray-500
        border-l
        border-gray-300;
    
      .Icon {
        @apply 
          size-[20px]
          text-gray-500;
      }
    }

    .Feature__title {
      @apply mr-2
        py-4
        text-base
        md:text-lg;
    }
  }

  &--no-image {
    .Feature__aside, .Feature__main {
      @apply max-md:col-span-12
        lg:max-xl:col-span-12
    }

    .Feature__aside {
      @apply md:max-lg:col-span-4
        xl:col-span-4
        p-4
        sm:p-8;
    }

    .Feature__main {
      @apply md:max-lg:col-span-8
        xl:col-span-8
        relative
        min-h-[4rem]
        p-4
        sm:p-8
        pr-10
        sm:pr-20
        lg:pr-28
        sm:pb-10
        xl:pb-16;

      &:not(:has(.Feature__copy)) {
        @apply lg:max-xl:pb-20;
      }

    }

    .Feature__title {
      @apply text-lg
        sm:text-2xl
        font-medium
        sm:font-medium;
    }

    .Feature__copy {
      &, p {
        @apply text-base
          md:text-lg
          3xl:text-2xl
          3xl:font-normal
          leading-snug;
      }
    }

    .Feature__action {
      @apply absolute
        top-0
        right-0
        p-2
        sm:p-4
        border-b
        border-l
        border-gray-300
        rounded-bl-md;
    }

    .Icon {
      @apply size-[20px]
        sm:size-[35px];
    }
  }
}

.Layout--full {
  .Feature {
    &--image {
      .Feature__copy {
        @apply xl:p-10
          xl:pb-20;
      }

      .Feature__footer {
        @apply xl:pl-10;
      }
    }

    &--no-image {
      .Feature__aside {
        @apply xl:p-14;
      }

      .Feature__main {
        @apply xl:p-14
          xl:pr-24
          2xl:pb-20;
      }
    }
  }
}