Event

.Event {
  @apply overflow-hidden
    flex
    max-sm:flex-col
    border
  border-gray-400
    rounded-md;

  &__image {
    @apply flex
      flex-col
      items-center
      justify-center
      sm:min-w-[200px]
      sm:w-[200px]
      lg:min-w-[250px]
      lg:w-[250px]
      max-sm:p-8
      bg-gray-100
      max-sm:border-b
      sm:border-r
      border-gray-400;

    .Image {
      @apply max-w-full
        w-auto
        rounded-sm;
    }
  }

  &__text {
    @apply flex-grow
      p-4
      sm:p-6
      bg-gray-100;

    .Event__date {
      @apply flex
        items-center
        max-2xl:mb-2
        font-bold
        leading-none;
  
      .Icon {
        @apply size-[20px]
          mr-2;
      }
    }

    &.copy {
      .Event__title {
        @apply  3xl:mt-3
          max-3xl:mb-2
          max-sm:text-xl
          text-blue
          text-2xl
          font-bold;
    
      }
    }
  }

  &__meta {
    @apply 2xl:flex;
  }

  &__copy {
    @apply text-gray-900;
  }

  &__location {
    @apply flex 
      items-center
      2xl:ml-4
      font-bold;

    &:before {
      @apply 2xl:content-["•"]
        2xl:mr-4;
    }

    .Icon {
      @apply size-[20px]
        mr-2
        fill-gray-400;
    }
  }

  &__action {
    @apply flex
      items-center
      mt-8
      md:mt-16
      font-bold;

    .Icon {
      @apply size-[20px]
        ml-2;
    }
  }
}