@use '~@quartz/styles/scss/color-scheme';
@use '~@quartz/styles/scss/media-queries';
@use '~@quartz/styles/scss/tokens';

.container {
	display: flex;
	align-items: flex-start;

	&.extra-large {
		@include media-queries.tablet-portrait-up {
			align-items: center;
		}
	}
}

.thumbnail-container {
	flex-shrink: 0;
	width: 80px;
	margin-right: 12px;
	border-radius: tokens.$size-border-radius;
	overflow: hidden;

	&.extra-large {
		@include media-queries.tablet-portrait-up {
			width: 175px;
			margin-right: 24px;
		}

		@include media-queries.desktop-up {
			width: 220px;
			margin-right: 40px;
		}
	}
}

.sponsored-by {
	color: tokens.$color-gold;
}

.sponsor {
	color: color-scheme.$typography-faint;
}