.project-card {
  background-color: black;
  border-width: 0 !important;
  border-radius: 0.25rem;
  overflow: hidden;
  align-items: stretch;
  > .media-left {
    margin-inline-end: 0;
    .image {
      height: 100% !important;
    }
    .image.is-128x128 {
      min-height: 128px;
    }
    .image img {
      height: 100%;
      object-fit: cover;
    }
  }
  > .media-content {
    padding: var(--bulma-media-spacing);
  }
}

.project__pictures {
  > :first-child > figure {
    border-color: var(--bulma-secondary);
  }
  figure {
    border: 2px solid #353535;
    border-radius: 5px;
    overflow: hidden;
    transition: transform .2s;
    cursor: move;
    &:hover {
      border-color: #545454;
      transform: scale(1.05);
    }
  }
  .picture__remove {
    display: none;
    position: absolute;
    top: 0;
    right: 0;
    z-index: 1;
    background-color: black;
    border-radius: 100%;
  }
  > :hover .picture__remove {
    display: block;
  }
}
.dragging {
  .project__pictures {
    position: relative;
    background-color: var(--bulma-primary-30);
  }
  .project__pictures::after {
    content: '';
    z-index: -1;
      position: absolute;
      top: -4px; bottom: -4px;
      left: -4px; right: -4px;
    background-image: repeating-linear-gradient(
      -55deg,
      #000,
      #000 20px,
      #ffb101 20px,
      #ffb101 40px
    );
    border-radius: 5px;
  }
}