_items.scss 1.57 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%;
alain's avatar
alain committed
29
							
Benthe Kuijpers's avatar
Benthe Kuijpers committed
30
						}
Benthe Kuijpers's avatar
Benthe Kuijpers committed
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
					}

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

	.item {
alain's avatar
alain committed
67
		margin-bottom: 40px;
Benthe Kuijpers's avatar
Benthe Kuijpers committed
68

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

75
76
77
			img {
				width: 100%;
				height: 100%;
alain's avatar
alain committed
78
        mix-blend-mode: multiply;
79
			}
Benthe Kuijpers's avatar
Benthe Kuijpers committed
80

81
82
83
84
85
86
87
			&--cover img {
				object-fit: cover;
			}

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

		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;
			}
		}
	}
107
108

	// If there are more than 3 items; smaller header font size
alain's avatar
alain committed
109
	&--max {
110
		.item h3 {
111
112
			font-size: 23px;
			line-height: 26px;
113
114
		}
	}
Benthe Kuijpers's avatar
Benthe Kuijpers committed
115
}