_items.scss 1.51 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%;
18
19
20
						height: 0;
						padding-bottom: 100%;
						position: relative;
Benthe Kuijpers's avatar
Benthe Kuijpers committed
21

22
23
						&--contain img {
							object-position: center center;
Benthe Kuijpers's avatar
Benthe Kuijpers committed
24
25
						}

26
27
28
						img {
							position: absolute;
							width: 100%;
Benthe Kuijpers's avatar
Benthe Kuijpers committed
29
						}
Benthe Kuijpers's avatar
Benthe Kuijpers committed
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
					}

					&__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
51
				.img {
Benthe Kuijpers's avatar
Benthe Kuijpers committed
52
53
					@media only screen and (min-width: $medium) {
						width: 250px;
54
						height: 250px;
Benthe Kuijpers's avatar
Benthe Kuijpers committed
55
56
57
					}
					@media only screen and (min-width: $large) {
						width: 320px;
58
						height: 320px;
Benthe Kuijpers's avatar
Benthe Kuijpers committed
59
60
61
62
63
64
65
66
67
					}
				}
			}
		}
	}

	.item {
		margin-bottom: 100px;

Benthe Kuijpers's avatar
Benthe Kuijpers committed
68
		.img {
Benthe Kuijpers's avatar
Benthe Kuijpers committed
69
70
			margin-bottom: 20px;
			width: 160px;
71
72
			height: 160px;
			overflow: hidden;
Benthe Kuijpers's avatar
Benthe Kuijpers committed
73

74
75
76
77
			img {
				width: 100%;
				height: 100%;
			}
Benthe Kuijpers's avatar
Benthe Kuijpers committed
78

79
80
81
82
83
84
85
			&--cover img {
				object-fit: cover;
			}

			&--contain img {
				object-fit: contain;
				object-position: top center;
Benthe Kuijpers's avatar
Benthe Kuijpers committed
86
			}
Benthe Kuijpers's avatar
Benthe Kuijpers committed
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
		}

		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;
			}
		}
	}
105
106
107
108
109
110
111

	// If there are more than 3 items; smaller header font size
	&--max, {		
		.item h3 {
			font-size: 28px;
		}
	}
Benthe Kuijpers's avatar
Benthe Kuijpers committed
112
}