start /o-gractwie content fill + icons

styles/Index.module.scss

@@ -92,38 +92,3 @@
 		}
 	}
 }
-.chips {
-	display: flex;
-	flex-direction: row;
-	justify-content: center;
-	flex-wrap: wrap;
-	gap: 1rem;
-}
-.chip {
-	display: inline-flex;
-	text-decoration: none;
-	gap: 0.5rem;
-	align-items: center;
-	color: inherit;
-	padding: 6px 8px;
-	border: 1px solid var(--grey);
-	border-radius: 8px;
-	transition-duration: 100ms;
-	text-rendering: geometricPrecision;
-	// font-family: var(--fonts-bold);
-	// color: var(--grey);
-	svg {
-		color: var(--grey);
-	}
-	&:hover,
-	&:focus {
-		outline: none;
-		background: var(--black1);
-		border: 1px solid var(--black1);
-		box-shadow: var(--shadow0);
-		transform: scale(1.1);
-		svg {
-			color: var(--color);
-		}
-	}
-}

styles/globals.scss

@@ -39,3 +39,39 @@ main {
 	margin: 0 auto;
 	padding: 1rem;
 }
+
+.chips {
+	display: flex;
+	flex-direction: row;
+	justify-content: center;
+	flex-wrap: wrap;
+	gap: 1rem;
+}
+.chip {
+	display: inline-flex;
+	text-decoration: none;
+	gap: 0.5rem;
+	align-items: center;
+	color: inherit;
+	padding: 6px 8px;
+	border: 1px solid var(--grey);
+	border-radius: 8px;
+	transition-duration: 100ms;
+	text-rendering: geometricPrecision;
+	// font-family: var(--fonts-bold);
+	// color: var(--grey);
+	svg {
+		color: var(--grey);
+	}
+	&:hover,
+	&:focus {
+		outline: none;
+		background: var(--black1);
+		border: 1px solid var(--black1);
+		box-shadow: var(--shadow0);
+		transform: scale(1.1);
+		svg {
+			color: var(--color);
+		}
+	}
+}

styles/oGractwie.module.scss

@@ -0,0 +1,87 @@
+.biglogocontainer {
+	display: flex;
+	flex-direction: row;
+	background: var(--black1);
+	margin: 1rem 0;
+	border-radius: 8px;
+	box-shadow: var(--shadow0);
+	svg {
+		min-width: 192px;
+		min-height: 192px;
+		@media screen and (max-width: 800px) {
+			display: none;
+		}
+	}
+	article {
+		background: rgba(white, 5%);
+		border-radius: 8px;
+		border-bottom-left-radius: 0;
+		border-top-left-radius: 0;
+		@media screen and (max-width: 800px) {
+			border-radius: 8px;
+		}
+		padding: 0.5rem 1rem;
+		h1 {
+			display: flex;
+			flex-direction: row;
+			align-items: center;
+			gap: 1rem;
+			svg {
+				display: inline;
+				min-width: initial;
+				min-height: initial;
+				@media screen and (min-width: 801px) {
+					display: none;
+				}
+			}
+		}
+		p {
+			margin: 6px 0;
+		}
+	}
+}
+.persons {
+	display: flex;
+	flex-direction: row;
+	flex-wrap: wrap;
+	margin-top: 1rem;
+	gap: 1rem;
+	article {
+		--radius: 6px;
+		flex: 1;
+		display: flex;
+		flex-direction: row;
+		background: var(--black1);
+		border-radius: var(--radius);
+		img {
+			width: 128px;
+			max-width: 156px;
+			flex: 1;
+			border-top-left-radius: var(--radius);
+			border-bottom-left-radius: var(--radius);
+			// for alt text
+			color: var(--grey);
+			// for mollin's vertical picture to display well
+			aspect-ratio: 1 / 1;
+			object-fit: cover;
+			object-position: 50% 35%;
+		}
+		div {
+			min-width: 14rem;
+			padding: 0 1rem;
+		}
+	}
+	@media screen and (max-width: 400px) {
+		article {
+			flex-direction: column;
+			width: 100%;
+			img {
+				margin: 1rem auto;
+				border-radius: 8px;
+			}
+			div {
+				padding-bottom: 1rem;
+			}
+		}
+	}
+}