/* Patterns - Content - Card Sectioned */
////
/// @group Patterns-Card_Sectioned
/// Patterns - Content - Card Sectioned

///
.card {
	&-sectioned {
		display: flex;
		justify-content: space-between;
		padding: var(--space-none);

		&-top {
			display: flex;
			flex: 1;
		}

		&.flex-direction-row {
			.card {
				&-image {
					padding: var(--space-m) var(--space-none) var(--space-m) var(--space-m);

					&.padding-none {
						padding: var(--space-none);
					}
				}

				&-sectioned-right .card-image {
					order: 2;
					padding: var(--space-m) var(--space-m) var(--space-m) var(--space-none);

					&.padding-none {
						padding: var(--space-none);
					}
				}
			}
		}
	}

	&-image {
		padding: var(--space-m) var(--space-m) var(--space-none);

		& img {
			display: block;
			margin: 0 auto;
		}
	}

	&-title {
		font-size: var(--font-size-h4);
		font-weight: var(--font-semi-bold);
		padding: var(--space-m) var(--space-m) var(--space-none) var(--space-m);
	}

	&-content {
		flex: 1;
		padding: var(--space-m);
	}

	&-bottom {
		padding: var(--space-none) var(--space-m) var(--space-m);
	}
}

///
.layout-native {
	.card {
		&-sectioned {
			padding: 0;

			&.flex-direction-row .card-image {
				padding: var(--space-base) var(--space-none) var(--space-base) var(--space-base);

				&.padding-none {
					padding: var(--space-none);
				}
			}
		}

		&-title {
			padding: var(--space-base) var(--space-base) var(--space-none) var(--space-base);
		}

		&-image {
			padding: var(--space-base) var(--space-base) var(--space-none);

			&.padding-none {
				padding: var(--space-none);
			}
		}

		&-content {
			padding: var(--space-base);

			&.padding-none {
				padding: var(--space-none);
			}
		}

		&-bottom {
			padding: var(--space-none) var(--space-base) var(--space-base);
		}
	}
}

// Responsive -------------------------------------------------------------------------
///
.tablet {
	.card-title {
		font-size: calc(var(--font-size-h4) - 1px);
	}
}

.phone {
	.card-title {
		font-size: calc(var(--font-size-h4) - 2px);
	}
}