@use 'sass:map';
@use 'sass:string';
@use '../../base/mixins/breakpoints' as break;
@use '../../base/functions' as *;

.featured-media {
	display: flex;
	flex-direction: column;
	gap: var(--padding-huge);

	&-card {
		width: brandui-col-spacing(5);

		@include break.max-mobile {
			width: 100%;
		}
	}

	&-item {
		width: brandui-col-spacing(5);

		@include break.max-mobile {
			width: 100%;
		}
	}

	&-content {
		&-wrapper {
			display: flex;
			justify-content: space-around;

			@include break.max-mobile {
				flex-direction: column;
				align-items: center;
				justify-content: baseline;
				gap: var(--padding-large);
			}
		}
	}

	&-image {
		width: brandui-col-spacing(7);
		z-index: 0;
		transform: scale(1.2);
		transform-origin: bottom center;

		@include break.max-mobile {
			width: 100%;
		}

		@include break.max-container-6 {
			transform: scale(1.25);
		}
	}
}

.featured-media-image {
	container-type: inline-size;
	container-name: feature-media-image;
}