rename css/ -> styles/

styles/artist.css

@@ -0,0 +1,89 @@
+.artist {
+  width: 100%;
+  margin: 2rem 0;
+  display: grid;
+  scroll-margin-top: 1rem;
+}
+
+.artist:nth-child(odd) {
+  grid-template:
+    'imgs h3'
+    'imgs desc'
+    'imgs .';
+  grid-template-columns: 45% auto;
+}
+
+.artist:nth-child(even) {
+  grid-template:
+    'h3 imgs'
+    'desc imgs'
+    '. imgs';
+  grid-template-columns: auto 45%;
+}
+
+@media (max-width: 1050px) {
+  .artist:nth-child(n) {
+    grid-template:
+      'imgs'
+      'h3'
+      'desc';
+  }
+}
+
+.fit-contain {
+  object-fit: contain;
+  grid-area: imgs;
+}
+
+.artist img {
+  max-height: 100%;
+  max-width: 100%;
+  border-radius: 1rem;
+}
+
+.artist h3 {
+  grid-area: h3;
+  text-transform: uppercase;
+}
+
+.artist:nth-child(odd) h3 {
+  padding-left: .5rem;
+}
+
+.artist:nth-child(even) h3 {
+  padding-right: .5rem;
+  text-align: right;
+}
+
+.description {
+  grid-area: desc;
+  background-color: var(--color-alt);
+  border-radius: 0 0 1rem 1rem;
+}
+
+.artist:nth-child(odd) .description {
+  margin-left: 1.75rem;
+}
+
+.artist:nth-child(even) .description {
+  margin-right: 1.75rem;
+}
+
+@media (max-width: 1050px) {
+  .artist:nth-child(n) h3 {
+    padding: .5rem 0 0;
+  }
+
+  .artist:nth-child(odd) .description {
+    margin-left: .625rem;
+  }
+
+  .artist:nth-child(even) .description {
+    margin-right: .625rem;
+  }
+}
+
+.description p:last-child {
+  text-align: center;
+  padding-bottom: 1rem;
+}