.boxart {
    width: 190px;
    height: 254px;
    background: lightgrey;
    position: relative;
    transform: skewY(-10deg);
    /* border: 5px solid #000000; */
    box-sizing: border-box;
    transition: all 0.3s;
  }
  
  .boxart::before {
    content: '';
    width: 15px;
    height: 254px;
    background: #000000;
    background-image: url("../../img/screenshots/coverSide.png");
    background-size: 13px 254px;
    position: absolute;
    top: -1px;
    left: -14.7px;
    transform-origin: right;
    transform: skewY(45deg);
    border: none;
    transition: all 0.5s;
  }
  
  .boxart::after {
    content: '';
    height: 15px;
    width: 190px;
    background: #000000;
    position: absolute;
    top: -14.7px;
    transform-origin: bottom;
    transform: skewX(45deg);
    border: none;
    transition: all 0.5s;
  }
  
  .boxart:hover {
    transform: skewY(0deg);
  }
  
  .boxart:hover::before {
    width: 0px;
    height: 249px;
    left: 0;
    top: 0.1px;
  }
  
  .boxart:hover::after {
    width: 184px;
    height: 0px;
    left: 0.1px;
    top: 0;
  }
  
  .boxart__content {
    padding: 10px;
    color: #323232;
  }