_items.scss 1.36 KB
Newer Older
Benthe Kuijpers's avatar
Benthe Kuijpers committed
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.items-row {

	.grid {
		display: block;
	}

	&--columns {
		.grid {
			@media only screen and (min-width: $large) {
				display: flex;

				.item {
					display: block;
					margin-bottom: auto;

Benthe Kuijpers's avatar
Benthe Kuijpers committed
16
					.img {
Benthe Kuijpers's avatar
Benthe Kuijpers committed
17
						width: 100%;
Benthe Kuijpers's avatar
Benthe Kuijpers committed
18
19
20
21
22
23
24
25
26
27
28
29
30
31

						img {
							width: 100%;
						}

						&--cover {
							height: 0;
							padding-bottom: 100%;
							position: relative;

							img {
								position: absolute;
							}
						}
Benthe Kuijpers's avatar
Benthe Kuijpers committed
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
					}

					&__content {
						margin: 0;
					}
				}
			}
		}

		.container>h3 {
			@media only screen and (min-width: $medium) {
				text-align: center;
			}
		}
	}

	&--rows {
		.grid {
			display: block;

			.item {
Benthe Kuijpers's avatar
Benthe Kuijpers committed
53
				.img {
Benthe Kuijpers's avatar
Benthe Kuijpers committed
54
55
					@media only screen and (min-width: $medium) {
						width: 250px;
Benthe Kuijpers's avatar
Benthe Kuijpers committed
56
57
58
59

						&--cover {
							height: 250px;
						}
Benthe Kuijpers's avatar
Benthe Kuijpers committed
60
61
62
					}
					@media only screen and (min-width: $large) {
						width: 320px;
Benthe Kuijpers's avatar
Benthe Kuijpers committed
63
64
65
66

						&--cover {
							height: 320px;
						}
Benthe Kuijpers's avatar
Benthe Kuijpers committed
67
68
69
70
71
72
73
74
75
					}
				}
			}
		}
	}

	.item {
		margin-bottom: 100px;

Benthe Kuijpers's avatar
Benthe Kuijpers committed
76
		.img {
Benthe Kuijpers's avatar
Benthe Kuijpers committed
77
78
			margin-bottom: 20px;
			width: 160px;
Benthe Kuijpers's avatar
Benthe Kuijpers committed
79
80
81
82
83
84
85
86
87
88
89

			&--cover {
				height: 160px;
				overflow: hidden;

				img {
					width: 100%;
					height: 100%;
					object-fit: cover;
				}
			}
Benthe Kuijpers's avatar
Benthe Kuijpers committed
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
		}

		h3 {
			font-weight: bold;
			margin: 0 0 40px;
		}

		@media only screen and (min-width: $smallmedium) {
			display: flex;
			flex-wrap: wrap;
			align-items: flex-start;

			&__content {
				flex: 1;
				margin-left: 30px;
			}
		}
	}
}