.contributor-grid-container {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  width: 80vw;
  .item {
    display: flex;
    flex-wrap: wrap;
    flex: 0 0 16%;

    align-items: center;
    gap: 8px;
    padding: 0.5rem;
    margin: 0.5rem 0;
    border-radius: 50px;
    box-shadow: -1px 6px 19px -3px rgba(0, 0, 0, 0.23) !important;
    -webkit-box-shadow: -1px 6px 19px -3px rgba(0, 0, 0, 0.23) !important;
    -moz-box-shadow: -1px 6px 19px -3px rgba(0, 0, 0, 0.23) !important;

    &:hover .image img {
      transform: scale(1.05);
      transition: all 0.2s ease-in-out;
    }

    &.main-author {
      border: 1px solid var(--e-global-color-primary);

      &:focus,
      &:active {
        border: 1px solid var(--e-global-color-primary) !important;
        border-color: var(--e-global-color-primary) !important;
      }

      .content .title {
        color: var(--e-global-color-primary);
      }
    }

    .image {
      display: flex;
      flex: 0 0 25%;

      img {
        border-radius: 100px;
        border: 3px solid transparent;
        width: 100%;
      }
    }

    .content {
      flex: 0 0 66%;
      .tag {
        font-family: "Source Sans 3";
        color: #595959;
        font-size: 12px;
      }
      .title {
        font-family: "Source Sans 3";
        color: #595959;
        font-size: 16px;
        line-height: 12px;
      }
    }
  }
}

@media screen and (min-width: 992px) and (max-width: 1699.98px) {
  .contributor-grid-container {
    padding: 0 1rem;
    width: 100vw;
  }
}

@media screen and (min-width: 992px) and (max-width: 1699.98px) {
}

@media screen and (max-width: 768px) {
  .contributor-grid-container {
    overflow-x: auto;
    flex-wrap: nowrap;
    .item {
      gap: 10px;
      flex: 0 0 70%;

      .image {
        flex: 0 0 30%;
      }
      .content {
        flex: 0 0 64%;
        .title {
          font-size: 16px;
        }
        .tag {
          font-size: 12px;
        }
      }
    }
  }
}