.hero {
  .author picture,
  .person-title {
    display: none;
  }
}

.blog_content {
  .author img {
    object-fit: cover;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    width: 4rem;
    overflow-clip-margin: unset;
    overflow: clip;
  }

  .author {
    margin-inline: 0 !important;
  }

  .player-frame {
    margin-block-end: calc(var(--section-margins) / 2);
    iframe {
      height: 100%;
      min-width: 100%;
      aspect-ratio: 16 / 9;
    }
  }
}

.article-end-actions {
  margin-block: calc(var(--section-margins) / 2);
  .author {
    gap: calc(var(--gap) / 2);
    flex: 1 1 auto;
  }
  .person-author {
    display: none;
  }
}

.worksample-info {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--gap) / 1) calc(var(--gap) / 0.5);
  align-content: flex-start;
  & > div {
    flex: 1;
    min-width: max(32%, 10rem);
  }
}

/* ==== Article Collection page ==== */

.article-card-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-column-gap: calc(var(--gap) * 2);
  grid-row-gap: var(--gap);

  article {
    display: flex;
    flex-direction: column;
    padding-block: calc(var(--section-margins) / 2);
  }

  .article-content {
    display: flex;
    height: 100%;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
  }

  .article-picture {
    max-height: var(--max-video-h);
    border-radius: calc(var(--radius) / 1.5);
    overflow: hidden;
    margin-block-end: calc(var(--gap) / 2);

    img {
      object-fit: cover;
      object-position: 50% 50%;
      border-radius: calc(var(--radius) / 1.5);
      max-height: var(--max-video-h);
      aspect-ratio: 16 / 9;
    }
  }

  & > article:nth-child(-n + 3) {
    grid-column: 1 / -1;
    align-items: revert;
    .blog_content {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .article-content {
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;
    }
    .article-title {
      font-size: var(--fs-xl);
    }
  }

  @media (width <= 576px) {
    article {
      grid-column: 1 / -1;
      align-items: revert !important;
    }
  }
}