@layer components {

  .relations-card {
    display: grid;
    grid-template-areas:
      "avatar relation"
      "avatar updated"
      "avatar actions"
  ;
    grid-template-columns: 80px 1fr;
    border: 1px solid #ccc;
    @apply u-p-8 u-rounded-8 u-mb-8;
    background-color: #fff;
  }

  .relations-card-other {
    display: grid;
    grid-template-areas:
      "avatar relation"
      "avatar updated"
  ;
    grid-template-columns: 80px 1fr;
    border: 1px solid #ccc;
    @apply u-p-8 u-rounded-8 u-mb-8;
    background-color: #fff;
  }

  .relations-card img {
    max-width: 100%;
    height: auto;
  }

  .relation-avatar {
    grid-area: avatar;
    display: flex;
    width: 64px;
    align-items: center;
    flex-direction: column;
  }

  .relation-category {
    grid-area: category;
    @apply u-font-700 u-mb-8;
  }

  .relation-relation {
    grid-area: relation;
    @apply u-break-words u-mb-8;
  }

  .relation-updated {
    grid-area: updated;
    @apply u-flex u-text-12 u-text-gray-50 u-mb-8 u-justify-end;
  }

  .relation-actions {
    grid-area: actions;
    @apply u-flex u-flex-row u-gap-8 u-justify-end;
  }

  @media screen(sm) {
    .relations-card {
      display: grid;
      grid-template-areas:
      "avatar relation actions"
      "avatar updated actions"
    ;
      grid-template-columns: 80px 1fr 64px;
      border: 1px solid #ccc;
      @apply u-p-8 u-rounded-8 u-mb-8;
      background-color: #fff;
    }

    .relation-actions {
      @apply u-flex u-flex-col u-gap-8 u-justify-start;
    }

    .relation-relation {
      @apply u-mr-8;
    }

    .relation-updated {
      @apply u-mr-8 u-self-end u-mb-0;
    }
  }
}
