.mpab-thumb {
  display: block;
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 96px;
  overflow: hidden;
  background: #f1eee7;
}

.mpab-thumb::before {
  position: absolute;
  box-sizing: border-box;
  content: "";
}

.mpab-thumb[class*="mpab-thumb--size-"]::before {
  left: 50%;
  top: 50%;
  border: 2px solid #424530;
  border-radius: 5px;
  background: #d9d9cc;
  box-shadow: 0 7px 16px rgba(66, 69, 48, 0.16);
  transform: translate(-50%, -50%);
}

.mpab-thumb[class*="mpab-thumb--size-"] {
  min-height: 0;
}

.mpab-thumb--size-15x15::before { width: 32%; aspect-ratio: 1; }
.mpab-thumb--size-20x20::before { width: 40%; aspect-ratio: 1; }
.mpab-thumb--size-25x25::before { width: 49%; aspect-ratio: 1; }
.mpab-thumb--size-20x30::before { width: 35%; aspect-ratio: 2 / 3; }
.mpab-thumb--size-30x30::before { width: 58%; aspect-ratio: 1; }
.mpab-thumb--size-30x20::before { width: 60%; aspect-ratio: 3 / 2; }
.mpab-thumb--size-38x25::before { width: 68%; aspect-ratio: 38 / 25; }