/* Component detail: the return action sits beneath the artwork, centered. */
.panel-components[data-component-view="detail"] .component-back {
  min-width: 208px;
  min-height: 50px;
  padding: 0 24px;
  gap: 12px;
  font-size: 12px;
  letter-spacing: 0.11em;
  border-color: rgba(92, 236, 255, 0.72);
  box-shadow:
    inset 0 0 22px rgba(92, 236, 255, 0.08),
    0 0 16px rgba(92, 236, 255, 0.1);
}

.panel-components[data-component-view="detail"] .component-back > span:first-child {
  font-size: 19px;
}

@media (min-width: 1200px) {
  .panel-components[data-component-view="detail"] .component-back {
    top: auto;
    right: auto;
    bottom: clamp(132px, 16vh, 152px);
    left: 50%;
    transform: translateX(-50%);
  }

  .panel-components[data-component-view="detail"] .component-back:hover,
  .panel-components[data-component-view="detail"] .component-back:focus-visible {
    transform: translateX(-50%) translateY(-2px);
  }
}

@media (max-width: 1199px) {
  .panel-components[data-component-view="detail"] .component-back {
    position: static;
    grid-column: 1 / -1;
    grid-row: 6;
    justify-self: center;
    margin: 14px 0 0;
  }
}