Event listing

@charset "UTF-8";
@use '../../configurations/mixins' as mixin;
@use '../../configurations/bem' as bem;
@use '../../configurations/config' as config;
@use '../../configurations/variables' as var;
@use '../../configurations/functions' as func;
@use '../../configurations/colors/colors' as colors;
@use '../../configurations/colors/colors-functions' as colorFunc;
@use '../../vendor/grid/breakpoints' as breakpoint;
@use '../../vendor/grid/grid' as grid;
@use '../../vendor/baseline/plumber' as plumber;

@include mixin.organism(event-listing-item) {
	position: relative;
	padding: func.rhythm(2);
	border-left: 4px solid;
	border-radius: var.$border-radius;
	background-color: colors.$color-snow;
	font-size: var.$size-medium-plus;

	@include bem.e(button) {

	}

	@include breakpoint.bp-up(md) {
		font-size: var.$size-base;
	}

	@include bem.e(upper) {
		position: static;
		flex-direction: column;
		margin-bottom: func.rhythm(1);
	}

	@include bem.e(lower) {
		align-items: center;
		justify-content: space-between;
		margin-top: func.rhythm(1);
	}

	@include bem.e(heading) {
		@include plumber.plumber(
			var.$font-size: 2.5,
			$leading-bottom: 1
		);

		font-family: var.$font-family-headings;
		line-height: 1.75rem;
	}

	@include bem.e(footer) {
		margin-bottom: func.rhythm(2);
		margin-top: func.rhythm(2);

		@include breakpoint.bp-up(sm-xs) {
			margin-bottom: 0;
			margin-top: 0;
		}
	}

	@include bem.e(button) {
		margin-right: func.rhythm(1);
		margin-left: func.rhythm(1);
	}

	@include bem.e(icon-wrapper) {
		display: flex;
		align-items: center;
	}

	@include bem.e(icon) {
		margin-right: func.rhythm(1);
	}
}