@use '../../base/functions' as *;
@use '../../base/mixins/typography' as font;
@use '../../base/mixins/breakpoints' as break;

.quote {
	&-media {
		&-asset {
			display: block;
		}

		&-item {
			display: flex;
			justify-content: center;
			width: brandui-col-spacing(5);
			padding: var(--padding-small);

			&.blockquote {
				flex-direction: column;
				align-items: start;
				gap: var(--padding-large);

				blockquote {
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 8;
					line-clamp: 8;
					overflow: hidden;
				}
			}

			@include break.max-tablet {
				width: unset;
			}
		}

		&-source {
			@include font.get-typography(mini-header-small);
		}

		&-text {
			@include font.get-typography(subhead);
		}

		&-wrapper {
			display: flex;
			gap: var(--padding-huge);

			@include break.max-tablet {
				flex-direction: column;
			}
		}
	}
}