@import "@wordpress/base-styles/breakpoints";
@import "@wordpress/base-styles/mixins";
@import "@automattic/typography/styles/fonts";

@mixin jetpack-cloud-sections-shared-styles() {
	--color-accent: var(--studio-jetpack-green-50);
	--color-primary: var(--studio-jetpack-green-50);

	--color-accent-60: var(--studio-jetpack-green-70);

	background-color: var(--color-surface);

	font-family: Inter, $sans;

	#header {
		display: none;
	}
	.header {
		margin-bottom: 24px;
		padding: 0 5%;

		color: #4f748e;

		@include break-medium {
			margin-bottom: 32px;
			padding: 0;
		}

		.formatted-header__title {
			margin: 0 0 36px;

			color: var(--color-text);

			font-size: rem(21px);

			@include break-medium {
				margin: 1.5rem 0 40px;

				font-size: rem(35px);
			}
		}
	}

	.layout__content {
		padding: 0;
	}

	.foldable-card {
		font-size: rem(13px);
	}

	.faq {
		margin-bottom: 16px;

		@include break-medium {
			margin-bottom: 48px;
		}

		.faq__heading {
			margin: 56px 0 24px;

			color: #2e4453;

			font-size: rem(26px);
			font-weight: 400;
			text-align: center;

			@include break-medium {
				margin: 64px 0;

				font-size: rem(35px);
			}
		}
	}
}
