@import "@/components/panels/Media/style.scss";

.index {
  height: 100%;
  margin: 2px 0 -2px 0;

  .items {
    height: 100%;
    display: grid;
    gap: 1em;
    grid-template-columns: repeat(auto-fill, minmax(20em, 1fr));
    overflow-y: auto;
    padding: 1em;
  }

  .item {
    width: 100%;
    height: 15em;
    flex: 1;
    position: relative;
    cursor: pointer;

    &:hover {
      @extend .dim;
    }

    .image {
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      overflow: hidden;

      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        margin: 0;
      }

      i {
        font-size: 5em;
      }
    }

    .name {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      display: flex;
      justify-content: center;
      align-items: center;
      text-align: center;
      background-color: rgba(0, 0, 0, 0.75);
      color: white;
      font-size: 1.75em;
      font-weight: bold;
      padding: 0.5em;
    }
  }
}
