first

css/artist-resident.css

@@ -0,0 +1,101 @@
+.topic {
+	margin: 4rem auto;
+	display: grid;
+}
+
+.topic:nth-child(odd) {
+	grid-template:
+		'img h'
+		'img desc'
+		'img .';
+	grid-template-columns: 45% auto;
+}
+
+.topic:nth-child(even) {
+	grid-template:
+		'h img'
+		'desc img'
+		'. img';
+	grid-template-columns: auto 45%;
+}
+
+@media (max-width: 950px) {
+	.topic:nth-child(odd),
+	.topic:nth-child(even) {
+		grid-template:
+			'img'
+			'h'
+			'desc';
+	}
+}
+
+.topic img {
+	grid-area: img;
+	border-radius: 1rem;
+}
+
+@media (max-width: 950px) {
+	.topic img {
+		border-radius: 1rem 1rem 0 0;
+		border-bottom: .25rem solid var(--color-accent);
+	}
+}
+
+.topic h1,
+.topic h2 {
+	margin: 0;
+	grid-area: h;
+	border-bottom: .25rem solid var(--color-accent);
+	padding: .25rem;
+}
+
+.topic:nth-child(odd) h2 {
+	padding-left: .75rem;
+}
+
+.topic:nth-child(even) h2 {
+	text-align: right;
+	padding-right: .75rem;
+}
+
+@media (max-width: 950px) {
+	.topic:nth-child(odd) h2,
+	.topic:nth-child(even) h2 {
+		padding: .25rem 0;
+	}
+}
+
+.topic .desc {
+	grid-area: desc;
+	background-color: var(--color-bg-alt);
+	border-radius: 0 0 1rem 1rem;
+}
+
+.topic:nth-child(odd) .desc {
+	margin-left: 1.5rem;
+}
+
+.topic:nth-child(even) .desc {
+	margin-right: 1.5rem;
+}
+
+@media (max-width: 950px) {
+	.topic:nth-child(odd) .desc,
+	.topic:nth-child(even) .desc {
+		margin: 0;
+	}
+}
+
+.contact ul {
+	background-color: var(--color-bg-alt);
+	border-radius: 0 0 1rem 1rem;
+}
+
+.contact {
+	margin-top: 4rem;
+	text-align: center;
+}
+
+.contact li {
+	list-style: none;
+}