.mannequin-table {
  height: auto;
  aspect-ratio: 4 / 3;
  border: 1px solid rgba(23, 21, 20, .2);
  background: url('/static/img/Landing/atelier-os-mannequin-v1.png') center / cover no-repeat;
  box-shadow: 18px 24px 60px rgba(45, 37, 31, .12);
}

.mannequin-table::before,
.mannequin-body,
.dress-line,
.dress-hint {
  display: none;
}

.garment,
.garment:hover,
.garment.active {
  border: 0;
  background: transparent;
  color: var(--ink);
  box-shadow: none;
  clip-path: none;
  transform: none !important;
  border-radius: 14px;
  backdrop-filter: none;
}

.garment::before,
.garment::after,
.garment .shoe {
  display: none;
}

.garment:hover {
  background: rgba(232, 59, 50, .09);
  box-shadow: inset 0 0 0 1px rgba(232, 59, 50, .42);
}

.garment.active {
  background: rgba(232, 59, 50, .08);
  box-shadow: inset 0 0 0 2px var(--red), 0 0 0 6px rgba(232, 59, 50, .08);
}

.garment .garment-name {
  left: 50%;
  right: auto;
  top: auto;
  bottom: -35px;
  transform: translateX(-50%);
  padding: 7px 9px;
  border: 1px solid var(--ink);
  background: var(--paper);
  color: var(--ink);
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transition: .2s;
  z-index: 10;
}

.garment:hover .garment-name,
.garment.active .garment-name {
  opacity: 1;
}

.garment .module-name {
  display: inline;
  margin: 0 0 0 6px;
  font-family: var(--mono);
  font-size: 8px;
  font-style: normal;
}

.g-hat { left: 13%; top: 6%; width: 31%; height: 23%; }
.g-scarf { left: 63%; top: 6%; width: 27%; height: 29%; }
.g-blouse { left: 8%; top: 35%; width: 34%; height: 34%; }
.g-pants { left: 63%; top: 38%; width: 28%; height: 49%; }
.g-shoes { left: 15%; top: 73%; bottom: auto; width: 28%; height: 20%; display: block; }

@media (max-width: 950px) {
  .mannequin-table { height: auto; }
}

@media (max-width: 600px) {
  .mannequin-table { height: auto; }
  .garment .garment-name {
    left: 50%;
    right: auto;
    bottom: -28px;
    font-size: 6px;
  }
}