@layer application {
.card-protected-preview {
  position: absolute;
  z-index: 4;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  display: grid;
  grid-template-columns: minmax(1.5rem, 1fr) auto minmax(1.5rem, 1fr);
  grid-template-rows: auto auto;
  gap: 0.65rem 0.75rem;
  inline-size: min(calc(100% - clamp(2.5rem, calc(5 * var(--site-scale-unit)), 5rem)), 34rem);
  align-items: center;
  padding: 0;
  border: 0;
  background: transparent;
  color: #fff;
  cursor: pointer;
  font: inherit;
  transform: translate(-50%, -50%);
  transition:
    opacity 220ms ease,
    visibility 0s linear 220ms;
}

.card-protected-preview:focus-visible {
  border-radius: 0.35rem;
  outline: 2px solid currentColor;
  outline-offset: 0.45rem;
}

.card-protected-preview__line {
  block-size: 1px;
  background: currentColor;
  opacity: 0.72;
}

.card-protected-preview__lock {
  inline-size: clamp(1.4rem, calc(2 * var(--site-scale-unit)), 1.9rem);
  block-size: clamp(1.4rem, calc(2 * var(--site-scale-unit)), 1.9rem);
  justify-self: center;
  filter: invert(1);
}

.card-protected-preview__label {
  grid-column: 1 / -1;
  font-size: var(--type-size-accordion-protected-label);
  font-weight: var(--type-weight-medium);
  letter-spacing: 0.12em;
  line-height: 1.25;
  text-align: center;
  text-transform: uppercase;
}
}