website/public/css/hcard.css


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

.h-card {
	img {
		width: 6rem;
		height: 6rem;
		border-radius: 1rem;
	}
}

@media (min-width: 36rem) {
	.h-card {
		grid-column: media-start / content-end;
		display: grid;
		grid-template-columns: subgrid; /** Subgrid of main column layout */
		grid-template-rows: min-content 1fr;
		grid-template-areas:
			"empty heading"
			"photo text";

		img {
			grid-area: photo;
			margin-block-start: var(--spacing-block-sm);
		}

		header {
			grid-area: heading;
		}

		.h-card__text {
			grid-area: text;
		}
	}
}