@layer blocks {
	.blkBanner__link {
		--flow: var(--spacing3);
	}
	
	
	
	.wBanner figure {
		position: relative;
	}
	
	.wBanner figure img {
		object-fit: cover;
		width: 100%;
		height: 100%;
	}
	
	.blkBanner--type1 .wBanner {
		display: grid;
		grid-template-columns: repeat(8, 1fr);
		gap: var(--gridGap);
	}
	
	.blkBanner--type1 .wBanner--items1 figure {
		grid-column: 1 / -1;
		aspect-ratio: 16 / 9;
	}
	
	.blkBanner--type1 .wBanner--items2 figure,
	.blkBanner--type1 .wBanner--items3 figure {
		grid-column: span 4;
		aspect-ratio: 5 / 6;
	}
	
	.blkBanner--type1 .wBanner--items3 figure:first-child {
		grid-column: 1 / -1;
		aspect-ratio: 10 / 8;
	}
	
	.wBanner__badge {
		--badgeOffset: var(--spacing3);
		--badgeWidth: 5rem;
		
		position: absolute;
		top: var(--badgeOffset);
		left: var(--badgeOffset);
		
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: var(--badgeWidth);
		
		aspect-ratio: 1;
		background-color: var(--color__lime);
		border-radius: 50%;
		text-transform: uppercase;
	}
	
	
	.blkBanner--type2 figure {
		aspect-ratio: 1;
	}
	
	.blkBanner--type2 .wBanner__badge {
		top: auto;
		left: auto;
		right: var(--badgeOffset);
		bottom: var(--badgeOffset);
	}
	
	
	@media (min-width: 48rem) {
		.blkBanner .blk__column:nth-child(2) {
			align-self: center;
		}
		
		.blkBanner--type1 .blk__column:nth-child(2) {
			grid-column: span 4;
			grid-row: 1;
		}

		.blkBanner--type1 .blk__column:nth-child(1) {
			grid-column: 5 / -1;
			grid-row: 1;
		}
		
		.blkBanner--type1 .wBanner {
			max-height: 42rem;
		}
		
		.wBanner__badge {
			--badgeOffset: var(--spacing4);
			--badgeWidth: 8.75rem;
		}
		
		.blkBanner--type1 .wBanner--items3 {
			grid-template-rows: repeat(2, 1fr);
		}
		
		
		.blkBanner--type1 .wBanner--items3 figure:nth-child(1) {
			grid-row: span 2;
			grid-column: 1 / span 5;
			aspect-ratio: unset;
		}
		
		.blkBanner--type1 .wBanner--items3 figure:nth-child(2) {
			grid-row: span 1;
			grid-column: 6 / -1;
			aspect-ratio: unset;
		}
		
		.blkBanner--type1 .wBanner--items3 figure:nth-child(3) {
			grid-row: span 1;
			grid-column: 6 / -1;
			aspect-ratio: unset;
		}
		
		.blkBanner--type2 .wBanner {
			max-height: 45rem;
		}
		
		.blkBanner--type2 .blk__column:nth-child(2) {
			grid-column: span 4;
			grid-row: 1;
		}

		.blkBanner--type2 .blk__column:nth-child(1) {
			grid-column: 6 / -1;
			grid-row: 1;
		}
	}
	
	@media (min-width: 65rem) {
		.blkBanner--type1 .wBanner--items3 figure:nth-child(1) {
			grid-column: 1 / span 6;
		}
		
		.blkBanner--type1 .wBanner--items3 figure:nth-child(2) {
			grid-column: span 2;
		}
		
		.blkBanner--type1 .wBanner--items3 figure:nth-child(3) {
			grid-column: span 2;
		}
		
		.blkBanner--type2 .blk__column:nth-child(2) {
			grid-column: span 4;
		}
		
		.blkBanner--type2 .blk__column:nth-child(1) {
			grid-column: span 4 / -1;
		}
	}
}