@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@200;300;400;500;700;900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Manropes:wght@400;500;600;700;800&display=swap");
@import url('https://fonts.googleapis.com/css2?family=Hanken+Grotesk:wght@600;900&display=swap');

@tailwind base;
@tailwind components;
@tailwind utilities;

@mixin active {
  .elements {
    @apply grid opacity-100;
  }

  > img {
    @apply blur-2xl;
  }
}

html, body {
  @apply font-inter;
}

.item {
  @apply w-full aspect-[7/2] lg:aspect-[5/3] sm:h-[14rem] md:h-[16rem] relative pointer-events-auto cursor-pointer overflow-hidden transition-all rounded;
  > img {
    @apply rounded transition-all;
  }

  .elements {
    @apply hidden opacity-0 transition-all delay-100;
    > * {
      z-index: 30;
      min-height: 0;
    }
  }

  @media (hover: hover) and (pointer: fine) {
    &:hover {
      @include active;
    }
  }

  &.active {
    @include active;
  }
}

.icon-grid {
  direction: rtl;
  @apply min-w-0 max-w-full min-h-0 max-h-full;

  > a > svg {
    @apply w-full h-full;
  }

  > svg, a {
    width: 75%;
    height: 75%;
    @apply transition-transform drop-shadow-md hover:scale-[120%] opacity-80 hover:opacity-100 text-white m-auto aspect-square;
  }
}

.description {
  hyphens: auto;
  @screen md {
    hyphens: none;
  }
}

body {
  @apply h-full
}