.art_red {
  background-image: url("/img/polaroid_frame_small_red.png");
  box-shadow: 2px 2px 2px 1px rgb(0 0 0 / 35%);

  display: inline-block;
  width: 175px;
  height: 210px;

  margin: 10px;

  rotate: 2.0deg;

  transition: scale 0.1s ease-in-out;
}

.art_red:hover {
  box-shadow: 0px 0px 6px var(--pl_lineart_green);
  
  position: relative;
  z-index: 1000;

  scale: 150%;
  rotate: 0.0deg;
  
  transition: scale 0.1s ease-in-out
    , rotate 0.1s ease-in-out;

  /* IE, only works on <img> tags */
  -ms-interpolation-mode: nearest-neighbor;
  /* Firefox */
  image-rendering: crisp-edges;
  /* Chromium + Safari */
  image-rendering: pixelated;
}

.art_green {
  background-image: url("/img/polaroid_frame_small_green.png");
  box-shadow: 2px 2px 2px 1px rgb(0 0 0 / 35%);

  display: inline-block;
  width: 175px;
  height: 210px;

  margin: 10px;

  rotate: 0.9deg;

  transition: scale 0.1s ease-in-out;
}

.art_green:hover {
  box-shadow: 0px 0px 6px var(--pl_lineart_green);
  
  position: relative;
  z-index: 1000;

  scale: 150%;
  rotate: 0.0deg;
  
  transition: scale 0.1s ease-in-out
    , rotate 0.1s ease-in-out;

  /* IE, only works on <img> tags */
  -ms-interpolation-mode: nearest-neighbor;
  /* Firefox */
  image-rendering: crisp-edges;
  /* Chromium + Safari */
  image-rendering: pixelated;
}

.art_blue {
  background-image: url("/img/polaroid_frame_small_blue.png");
  box-shadow: 2px 2px 2px 1px rgb(0 0 0 / 35%);

  display: inline-block;
  width: 175px;
  height: 210px;

  margin: 10px;

  rotate: -1.2deg;

  transition: scale 0.1s ease-in-out;
}

.art_blue:hover {
  box-shadow: 0px 0px 6px var(--pl_lineart_green);
  
  position: relative;
  z-index: 1000;

  scale: 150%;
  rotate: 0.0deg;
  
  transition: scale 0.1s ease-in-out
    , rotate 0.1s ease-in-out;

  /* IE, only works on <img> tags */
  -ms-interpolation-mode: nearest-neighbor;
  /* Firefox */
  image-rendering: crisp-edges;
  /* Chromium + Safari */
  image-rendering: pixelated;
}

.art_title {
  color: black;
  font-family: sans-serif;
  
  display: block;
  margin-top: 7px;
  margin-bottom: auto;
  margin-left: 10px;
  margin-right: 10px;

  text-align: center;
}

.art_image {
  display: block;
  margin-top: 10px;
  margin-left: 10px;
  margin-right: 10px;
  max-width: 155px;
  max-height: 155px;
}

.art_text {
  display: block;
  margin: 10px;
}