.ak-card {
  background-color: transparent;
  transition: 0.2s;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  outline: none;
  display: inline-block;

  &--stripe {
    width: 200px;
    height: 200px;
    background-image:
      repeating-linear-gradient(
        -45deg,
        transparent,
        transparent 5px,
        rgba(255, 255, 255, 1) 10px,
        rgba(255, 255, 255, 1) 15px
      );

    &:hover {
      box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
    }
  }

  &--place {
    border: 1px solid transparent;
    width: 100px;
    height: 100px;
    box-shadow: inset 0 0 20px rgba($color: #fff, $alpha: 1);
    border-bottom: 4px solid white;

    &:active,
    &:focus {
      border-top: 1px solid #fff;
      border-left: 1px solid #fff;
      border-right: 1px solid #fff;
      box-shadow: inset 0 0 20px rgba($color: #fff, $alpha: 1), 0 5px 10px rgba(0, 0, 0, 0.1);
      transform: translateY(-10px);
    }

    &__rare {
      border-bottom: 4px solid map-get($colors, "yellow");
    }
  }
}