_events-teaser.scss

.events-teaser {
	margin: 0 0 30px;

	a {
		display: flex;
		flex-wrap: wrap;
		align-items: flex-start;
		text-decoration: none;
	}

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

	&__date {
		background: $blue;
		flex: 0 0 60px;
		margin: 0 20px 0 0;
		font-family: $font-header;
		color: white;
		font-weight: bold;
		text-align: center;
		font-size: 24px;
		line-height: 24px;
		padding: 8px;
		mix-blend-mode: multiply;
		@include colourBg($bg-yellow, 0deg);

		span {
			padding: 13px 5px;
			background: rgba(black,0.2);
			display: block;
			margin: 10px -8px -8px;
			font-size: 19px;
			line-height: 19px;
		}
	}

	&__text {
		flex: 1;

		h4 {
			font-size: 22px;
			line-height: 22px;
			margin: 0;

			@media only screen and (min-width: $smallmedium) {
				font-size: 28px;
				line-height: 30px;
			}
		}
	}
}