.market-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.market-grid article {
  isolation: isolate;
  overflow: hidden;
  background: #171717;
}

.market-grid article::before {
  content: "";
  position: absolute;
  z-index: -2;
  inset: 0;
  background-image: linear-gradient(rgba(23, 17, 17, .78), rgba(23, 17, 17, .9)), var(--market-image);
  background-size: cover;
  background-position: center;
  filter: saturate(.78);
  opacity: .9;
}

.market-grid article::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 10px;
  border: 1px solid rgba(210, 167, 101, .38);
  background-image:
    radial-gradient(circle at 9px 9px, rgba(228, 191, 125, .42) 0 1px, transparent 1.8px),
    radial-gradient(circle at 1px 1px, transparent 0 7px, rgba(145, 65, 55, .28) 7.5px 8.5px, transparent 9px);
  background-size: 24px 24px, 38px 38px;
  background-position: 2px 2px, 0 0;
  opacity: .42;
  pointer-events: none;
}

.market-grid article > * {
  position: relative;
  z-index: 1;
}

.market-grid .market-chinese { --market-image: url("assets/market-backgrounds/taiwan.webp"); }
.market-grid .market-southeast { --market-image: url("assets/market-backgrounds/philippines.webp"); }
.market-grid .market-vietnam { --market-image: url("assets/market-backgrounds/vietnam.webp"); }

.market-grid article {
  min-height: 292px;
  padding: 28px 25px 25px;
}

.market-grid .market-icon {
  display: block;
  width: 42px;
  height: 42px;
  margin-bottom: 14px;
  color: #e6bd73;
}

.market-grid .market-icon svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.market-grid .market-arrow {
  position: absolute;
  right: 24px;
  bottom: 20px;
  z-index: 2;
  color: #e6bd73;
  font-size: 27px;
  line-height: 1;
}

@media (max-width: 900px) {
  .market-grid { grid-template-columns: 1fr; }
  .market-grid article { min-height: 270px; }
}