.art { width: 100%; align-self: center; }
.art figcaption { font: 16px/1.5 var(--sans); margin-top: 18px; color: var(--muted); }
.plate { aspect-ratio: 1; width: 100%; background: var(--soft); position: relative; overflow: hidden; border-radius: 46% 46% 0 0; }
.plate i { display: block; position: absolute; }
.sun { width: 52%; height: 52%; top: 7%; right: -8%; background: var(--gold); border-radius: 50%; }
.arch { width: 61%; height: 88%; border: 57px solid var(--sky); border-bottom: 0; border-radius: 180px 180px 0 0; left: -10%; top: 34%; transform: rotate(-22deg); }
.path { width: 41%; height: 66%; background: var(--blue); border-radius: 110px 110px 0 0; bottom: -22%; right: 17%; transform: rotate(24deg); }
.dot { width: 19%; height: 19%; border-radius: 50%; background: var(--peach); left: 20%; top: 13%; }
.bar { height: 13%; width: 58%; background: #fbfcfb; right: -14%; bottom: 17%; transform: rotate(-25deg); }
.plate.sm { width: 210px; height: 210px; aspect-ratio: auto; border-radius: 50%; align-self: center; opacity: 1; }
.sm .arch { border-width: 28px; }
@media (max-width: 900px) { .plate.sm { width: 150px; height: 150px; } .sm .arch { border-width: 20px; } }
@media (max-width: 680px) {
  .art { max-width: 350px; margin-top: 32px; }
  .plate { aspect-ratio: 1.35; border-radius: 160px 160px 0 0; }
  .sun { right: 0; }
  .arch { border-width: 42px; width: 56%; left: 12%; transform: rotate(-12deg); }
  .bar { right: 4%; }
  .plate.sm { display: none; }
}