/* ! Banners: defaults */
.banners {
	margin-bottom: 2em;
}
	.banner {
		position: relative;
	}
		.banner-link {
			display: block;
		}
			.banner-img {
				display: block;
				width: 100%;
				height: auto;
			}
			.banner-container {
				position: absolute;
				top: 0;
				bottom: 0;
				left: 0;
				right: 0;
				margin: 0 auto;
				padding: 1em;
				padding: 5%;

				display: flex;
				align-items: center;
				justify-content: center;
			}
			.upperleft    .banner-container { align-items: flex-start; justify-content: flex-start; }
			.uppercentre  .banner-container { align-items: flex-start; justify-content: center;     text-align: center; }
			.upperright   .banner-container { align-items: flex-start; justify-content: flex-end;   }
			.middleleft   .banner-container { align-items: center;     justify-content: flex-start; }
			.middlecentre .banner-container { align-items: center;     justify-content: center;     text-align: center; }
			.middleright  .banner-container { align-items: center;     justify-content: flex-end;   }
			.lowerleft    .banner-container { align-items: flex-end;   justify-content: flex-start; }
			.lowercentre  .banner-container { align-items: flex-end;   justify-content: center;     text-align: center; }
			.lowerright   .banner-container { align-items: flex-end;   justify-content: flex-end;   }

			.banner-text {
				display: block;
				width: 100%;
				margin: 0;
				max-width: 800px;
				color: #fff;

				text-align: left;
				text-transform: none;
				transition: color .2s;
			}
			.theme-grey .banner-text {
				color: #333;
			}
			.theme-accent .banner-text {
				color: dodgerblue;
			}
			.theme-black .banner-text {
				color: #000;
			}
			.banner-link:hover .banner-text {
				opacity: .5;
			}
				.banner-title {
					color: inherit;
					font-size: 30px;
					font-size: clamp(2rem, 1rem + 4vw, 5rem);
					margin-top: 0;
					margin-bottom: 0;
					text-transform: none;
				}
				.banner-subtitle {
					color: inherit;
					font-size: 24px;
					font-size: clamp(1rem, 1rem + 2vw, 4rem);
					margin-top: 0;
					margin-bottom: 0;
					text-transform: none;
				}
				.banner-desc {

				}

				/* optional Animations */
				.slick-slide:not(.slick-current) .banner-text {
					opacity: 0.2;
					transform: translateY(2rem);
				}
				.slick-slide.slick-current .banner-text {
					transition: transform 1s ease-out .3s, opacity 1s ease-out .3s;
					opacity: 1;
					transform: translateY(0);
				}

/* ! Banners: Featured - slider */
.featured-banners {
	max-width: var(--container-outter);
	margin: 0 auto 4rem;
	width: 100%;
}
	.featured-banners .slick-list {
		border-radius: 4rem;
		overflow: hidden;
	}
	.featured-banners .banner-img {
		object-fit: cover;
		min-height: 200px;
		max-height: 600px;
		/* this sets vertical boundaries to Featured Banners
		 and prevents them from shrinking or growing beyond set height values
		 when viewport is either too short (mobile) or unknowingly large (wide monitors) */
	}
	@media (width < 600px) {
		.featured-banners .slick-list {
			border-radius: var(--border-radius-2);
		}
	}



.member-banners {
	margin-block: 4rem;
}


/* ! Banners: Grid Fixed item width */
.grid-fixed.banners {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	width: 102%;
	margin: 0 -1% 0;
	padding: 0;
}
	.grid-fixed .banner {
		display: inline-block;
		width: 25%;
		padding: 1em 1%;
	}
	.grid-fixed .banner-link {
		display: flex;
		align-items: center;
		height: 100%;
	}
	.grid-fixed .banner-img {
		transition: transform .3s;
	}
	.grid-fixed .banner-link:hover .banner-img {
		transform: scale(1.1);
	}
	.grid-fixed .banner-title {
		font-size: 20px;
	}

/* ! Banners: Grid Flex item width
(usually for sponsor logos where width is unknown. Set module settings to something like Width:0 and Height:100px ) */
.grid-flex.banners {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	width: 102%;
	margin-inline: -1%;
	padding: 0;
}
	.grid-flex .banner {
		display: flex;
		width: auto;
		margin: 1em 1%;
		padding: 0;
	}
	.grid-flex .banner-link {
		display: flex;
	}
	.grid-flex .banner-img {
		display: block;
		width: auto;
		height: auto;
		max-height: 170px;
		max-width: 300px;
		margin: auto;
		transition: all .3s;
	}
	.grid-flex .banner:hover .banner-img {
		transform: scale(1.1);
	}
	.grid-flex .banner-title {
		font-size: 1rem;
	}
@media (width < 600px) {
	.grid-flex .banner-img {
		max-height: 80px;
		max-width: 150px;
	}
}