@use 'sass:map';
@use '../../base/maps/tokens' as *;
@use '../../base/mixins/breakpoints' as breakpoints;
@use '../../base/functions' as *;

.text-media {
	display: flex;
	gap: var(--padding-huge);

	@include breakpoints.max-tablet {
		flex-direction: column;
		gap: var(--padding-large);
	}

	&.reverse {
		flex-direction: row-reverse;

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

	&-media {
		width: calc((100% / 12) * 7);

		@include breakpoints.max-tablet {
			width: calc((100% / 12) * 12);
		}
	}

	&-text {
		width: calc((100% / 12) * 5);

		@include breakpoints.max-tablet {
			width: calc((100% / 12) * 12);
		}

		&-content {
			height: 100%;
			display: flex;
			flex-direction: column;
			justify-content: center;
			padding: 0 0 var(--padding-huge) 0;

			&.reverse {
				padding: 0;
			}

			@include breakpoints.max-tablet {
				padding: 0;
			}
		}
	}
}