@layer components {
  .studio-digital > .sa-panel {
    position: relative;
    padding: clamp(1.1rem, 2.5vw, 2.5rem);
    margin-bottom: clamp(1.6rem, 3vw, 3rem);
    border-radius: clamp(1.6rem, 3.5vw, 3.2rem);
    background: color-mix(in srgb, var(--muted-surface) 12%, var(--surface));
  }
  .sa-intro { position: relative; container-type: inline-size; max-width: 950px; margin-inline: auto; }
  .sa-title { font: 900 clamp(1.1rem, 5.6cqw, 4.5rem)/1.08 var(--font); letter-spacing: -.055em; }
  .sa-title-line { display: flex; align-items: center; justify-content: center; gap: .2em; }
  .sa-title-line + .sa-title-line { margin-top: .09em; }
  .sa-design-photo { position: relative; display: block; flex: 0 0 1.85em; width: 1.85em; height: .82em; overflow: hidden; border-radius: 999px; background: var(--brand); transform: rotate(-3deg); }
  .sa-design-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 46%; }
  .sa-design-stamp { position: relative; display: block; flex: 0 0 1.4em; width: 1.4em; height: 1.03em; overflow: hidden; border-radius: .18em; transform: rotate(-6deg); }
  .sa-design-stamp img, .sa-design-disc img { display: block; width: 100%; height: 100%; object-fit: cover; }
  .sa-design-disc { display: grid; place-items: center; flex: 0 0 .87em; width: .87em; height: .87em; overflow: hidden; border-radius: 50%; background: var(--brand-deep); transform: rotate(12deg); }
  @media (max-width: 760px) {
    .sa-title { font-size: clamp(1.1rem, 6.5cqw, 3rem); }
  }
}

@layer responsive {
  @media (max-width: 760px) {
    .sa-panel .sa-title { font-size: clamp(1.35rem, 9cqw, 3rem); }
  }
}