_news-teaser.scss 865 Bytes
Newer Older
1
2
3
.news-teaser {
	
	.img-wrapper {
4
		line-height: 0;
5
		display: block;
Benthe Kuijpers's avatar
Benthe Kuijpers committed
6
		@include colourBg($bg-yellow, 0deg);
Benthe Kuijpers's avatar
Benthe Kuijpers committed
7
8

		img {
Benthe Kuijpers's avatar
Benthe Kuijpers committed
9
			mix-blend-mode: multiply;
Benthe Kuijpers's avatar
Benthe Kuijpers committed
10
			max-width: 100%;
Benthe Kuijpers's avatar
Benthe Kuijpers committed
11
			z-index: -1;
Benthe Kuijpers's avatar
Benthe Kuijpers committed
12
		}
Benthe Kuijpers's avatar
Benthe Kuijpers committed
13
14
15
16

		&:hover img {
			mix-blend-mode: normal;
		}
17
18
19
20
21
	}

	a {
		text-decoration: none;

22
23
24
25
		.label {
			margin: 15px 0;
		}

26
		h2 {
27
			margin: 0 0 10px;
Benthe Kuijpers's avatar
Benthe Kuijpers committed
28
29
30
31
32
			font-size: 22px;
			line-height: 22px;

			@media only screen and (min-width: $smallmedium) {
				font-size: 28px;
33
			line-height: 30px;
Benthe Kuijpers's avatar
Benthe Kuijpers committed
34
			}
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55

			@media only screen and (min-width: $large) {
				font-size: 32px;
				line-height: 36px;
			}
		}

		.category {
			font-style: italic;
			font-weight: 300;
		}

		.excerpt {
			display: none;

			@media only screen and (min-width: $medium) {
				display: block;
				margin: 20px 0;
				font-size: 20px;
				line-height: 32px;
			}
56
		}
Benthe Kuijpers's avatar
Benthe Kuijpers committed
57
58
59
60

		&.text-link	{
			padding: 0 0 0 5px;
		}
61
62
	}
}