.contacts {
  @apply flex w-full justify-center;

  min-width: 80vw;
}

.contacts__contact-container {
  @apply
    relative
    h-full
    m-1;

  width: calc(100% / 3);
  max-width: 300px;
}

.contacts__contact-container:before {
  content: "";
  display: block;
  padding-top: 100%;
}

.contacts__contact {
  @apply
    border
    bg-white
    border-grey-light
    flex
    flex-col
    justify-center
    items-center
    absolute
    h-full
    w-full
    rounded-xl
    text-center;

  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  box-sizing: content-box;
  cursor: pointer;
}

.contacts__contact-icon {
  @apply mb-2;
}

@screen sm {
  .contacts__contact-icon {
    @apply mb-3;
  }
}

.contacts__contact-name {
  @apply
    font-semibold
    text-xs;
}

@screen sm {
  .contacts__contact-name {
    @apply mb-2 text-sm;
  }
}

.contacts__contact svg {
  @apply
    w-5
    text-blue
    fill-current;

  width: 75%;
  min-width: 1.25rem;
  max-width: 2rem;
}

.contacts__contact-text {
  @apply 
    text-grey
    text-tn;

  display: none;
}

@screen sm {
  .contacts__contact-text {
    @apply text-xs;

    display: block;
  }
}