.species { padding: clamp(2.5rem, 6vw, 4rem) 0 0; }
.species__grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 2rem; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.species__item a { display: grid; gap: 0.6rem; text-decoration: none; color: var(--ink); border-top: 3px solid var(--shallows); padding-top: 1rem; }
.species__photo { display: grid; place-items: center; align-content: center; gap: 0.35rem; aspect-ratio: 4 / 3; border: 2px dashed var(--shallows); border-radius: var(--radius); background: var(--foam); color: var(--tide); font-size: 0.9rem; font-weight: 700; }
.species__name { font: 600 1.5rem/1.1 var(--font-display); color: var(--deep); }
.species__go { font-weight: 700; color: var(--tide); }
.species__item a:hover .species__name, .species__item a:focus-visible .species__name { color: var(--tide); }
@media (max-width: 62rem) { .species__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 36rem) { .species__grid { grid-template-columns: 1fr; } }