start /o-gractwie content fill + icons

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;
+			}
+		}
+	}
+}