.puramu-post-comments-attachments-list {
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  align-items: center;

  @media (min-width: 1024px) {
    margin-top: 20px;
    gap: 10px;
  }
}

.puramu-post-comments-attachment-preview {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  position: relative;
  width: calc(var(--attachment-dimension) * var(--scale-down-ratio));
  aspect-ratio: 1 / 1;

  @media (min-width: 1024px) {
    width: var(--attachment-dimension);
  }
}

.puramu-post-comments-attachment-preview .media-preview {
  aspect-ratio: 1 / 1;
  width: 100%;
  object-fit: cover;
  border-radius: 5px;
  cursor: pointer;
}

.puramu-post-comments-attachment-preview .media-preview-overlay {
  cursor: pointer;
  position: absolute;
  top: 0%;
  left: 0%;
  width: 100%;
  height: 100%;
  display: grid;
  place-content: center;

  &:hover {
    .media-preview-triangle {
      scale: 1.2;
      transition: scale 0.3s;
    }

    + video {
      scale: 1.2;
      transition: scale 0.3s;
    }
  }
}

.puramu-post-comments-attachment-preview .media-preview-triangle {
  width: 30px;
  height: 30px;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  transition: scale 0.3s;

  &:before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 0px;
    height: 0px;
    border-style: solid;
    border-width: 9px 0 9px 16px;
    border-color: transparent transparent transparent #FFFFFF;
    z-index: 100;
  }
}