@layer sections {
#species { padding: var(--space-1) 0; overflow-x: clip; }
#species .sp-stage { position: relative; margin-top: clamp(48px, 6vw, 88px); }
#species .sp-row { position: relative; display: flex; justify-content: center; align-items: center; }
#species .sp-panel { position: relative; flex: none; display: grid; justify-items: center; align-content: center; gap: 12px; width: clamp(240px, 23vw, 300px); min-height: clamp(330px, 30vw, 400px); padding: 36px 44px; text-align: center; }
#species .sp-panel + .sp-panel { margin-left: clamp(-44px, -3vw, -28px); }
#species .sp-panel--dogs { background: var(--color-6); border-radius: var(--radius-3); }
#species .sp-panel--cats { z-index: 1; width: clamp(300px, 29vw, 380px); background: var(--color-7); border-radius: 50%; aspect-ratio: 1; min-height: 0; padding: clamp(36px, 4vw, 52px) clamp(48px, 5vw, 64px); gap: 8px; }
#species .sp-panel--cats .sp-photo { width: clamp(84px, 7.5vw, 104px); }
#species .sp-panel--small { background: var(--color-8); color: var(--color-1); border-radius: 0 var(--radius-4) 0 0; }
#species .sp-panel--exotic { background: var(--color-9); border-radius: 999px 999px var(--radius-3) var(--radius-3); padding-top: 64px; }
#species .sp-photo { width: clamp(96px, 9vw, 124px); aspect-ratio: 1; border-radius: 50%; overflow: hidden; background: var(--color-3); }
#species .sp-photo img { width: 100%; height: 100%; object-fit: cover; }
#species .sp-panel .m-text { font-size: 16px; max-width: 24ch; }
#species .sp-accent { position: absolute; z-index: 2; pointer-events: none; }
#species .sp-accent--a { --m-shape-size: 44px; left: 8%; top: -40px; background: var(--color-11); }
#species .sp-accent--b { --m-shape-size: 46px; right: 10%; top: -54px; background: var(--color-10); }
#species .sp-accent--c { --m-shape-size: 40px; left: 46%; bottom: -46px; background: var(--color-6); }
#species .sp-accent--d { --m-shape-size: 38px; right: 4%; bottom: -30px; background: var(--color-5); }
@media (max-width: 1060px) and (min-width: 721px) {
  #species .sp-row { flex-wrap: wrap; row-gap: 0; }
  #species .sp-panel { width: 42%; }
  #species .sp-panel:nth-child(3) { margin-left: 0; }
}
@media (max-width: 720px) {
  #species .sp-row { flex-direction: column; }
  #species .sp-panel { width: min(100% - 2 * var(--space-2), 360px); min-height: 0; }
  #species .sp-panel + .sp-panel { margin-left: 0; margin-top: -26px; }
  #species .sp-panel--small { padding-top: 48px; }
}
}