feat: present cleared accessible project media

src/styles/components.css

@@ -74,6 +74,79 @@
   font-size: var(--step--1);
 }
 
+.project-media {
+  overflow: hidden;
+}
+
+.project-media img,
+.project-media video {
+  inline-size: 100%;
+  block-size: auto;
+  border: 1px solid var(--line);
+  background: var(--canvas);
+}
+
+.media-description,
+.chart-description,
+.video-controls,
+.chart-values {
+  margin-block-start: var(--space-2);
+}
+
+.chart-description {
+  display: grid;
+  grid-template-columns: minmax(6rem, auto) minmax(0, 1fr);
+}
+
+.chart-values {
+  inline-size: 100%;
+  border-collapse: collapse;
+  font-variant-numeric: tabular-nums;
+}
+
+.chart-values caption {
+  padding-block-end: var(--space-1);
+  color: var(--text);
+  font-weight: 650;
+  text-align: start;
+}
+
+.chart-values th,
+.chart-values td {
+  padding: 0.45rem;
+  border: 1px solid var(--line);
+  text-align: start;
+}
+
+.video-controls {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--space-2);
+  align-items: center;
+}
+
+.video-controls button {
+  min-inline-size: 8rem;
+  min-block-size: 44px;
+  padding-inline: var(--space-2);
+  border: 1px solid var(--cyan);
+  background: var(--cyan-deep);
+  color: var(--text);
+  font-family: var(--mono);
+  font-weight: 650;
+}
+
+.video-controls button:disabled {
+  border-color: var(--line);
+  color: var(--text-muted);
+}
+
+@media (max-width: 420px) {
+  .chart-description {
+    grid-template-columns: 1fr;
+  }
+}
+
 .portfolio-section svg {
   inline-size: 100%;
   block-size: auto;