/* ===================================================
   mix-blend-mode を並べてみる
   数値は記事・CodePen と同じ。変えたのは色だけ（6 色に）。
   1つずつ、番号のところからコピーして使えます。
   =================================================== */

/* ---------- 01 16 種類を並べる ---------- */
.normal {
  mix-blend-mode: normal;
}
.multiply {
  mix-blend-mode: multiply;
}
.screen {
  mix-blend-mode: screen;
}
.overlay {
  mix-blend-mode: overlay;
}
.color-dodge {
  mix-blend-mode: color-dodge;
}
.color-burn {
  mix-blend-mode: color-burn;
}
.darken {
  mix-blend-mode: darken;
}
.lighten {
  mix-blend-mode: lighten;
}
.hard-light {
  mix-blend-mode: hard-light;
}
.soft-light {
  mix-blend-mode: soft-light;
}
.difference {
  mix-blend-mode: difference;
}
.exclusion {
  mix-blend-mode: exclusion;
}
.hue {
  mix-blend-mode: hue;
}
.saturation {
  mix-blend-mode: saturation;
}
.color {
  mix-blend-mode: color;
}
.luminosity {
  mix-blend-mode: luminosity;
}

/* 並べ方 */
.one_area {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 20px;
}
.one_box {
  width: calc((100% - 20px * 2) / 3);
  background-color: #e8dc6a;
  padding: 20px;
}
.one_box p {
  text-align: center;
  margin: 0 0 10px;
}
.one_box img {
  max-width: 100%;
  vertical-align: top;
}
@media (max-width: 736px) {
  .one_area {
    gap: 10px;
  }
  .one_box {
    width: calc((100% - 10px * 2) / 3);
    padding: 10px;
  }
  .one_box p {
    font-size: 10px;
  }
}