.promotion {

}

.promotion_list {
  margin: 0 -0.5rem;
}

.promotion_list:after {
  content: "";
  display: table;
  clear: both;
}

.promotion_image {
  float: left;
  width: calc(16.666% - 1rem);
  margin: 0 0.5rem 1rem;
}

.promotion_image div {
  width: 100%;
  height: 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  mix-blend-mode: screen;
  filter: grayscale(100%);
}

.promotion_image:hover div {
  mix-blend-mode: initial;
  filter: none;
}

.promotion_links {
  margin: 0 -0.5rem;
}

.promotion_links:after {
  content: "";
  display: table;
  clear: both;
}

@media (max-width: 768px) {
  .promotion_image {
    width: calc(33.333% - 1rem);
  }
}

@media (max-width: 320px) {
  .promotion_image {
    width: calc(100% - 1rem);
  }
}