/* ================================================
Component: Membership Info
Path: components/flexible/membership_info/style.css
================================================ */
:is(body, .is-preview) {
	.membership-info__inner {
		display: flex;
		gap: var(--gap-2xl);
		align-items: stretch;
		font-family: var(--font-secondary);
		font-size: var(--font-size-md);
		color: var(--color-text-body);
		font-weight: var(--font-weight-light);
		line-height: normal;
		letter-spacing: 0.135px;
		padding-top:40px;

		@media screen and (max-width: 1200px) {
			display: block;
		}
	}
	.membership-info__title {
		font-family: var(--font-display);
		font-size: var(--font-size-2xl);
		font-weight: var(--font-weight-bold);
		line-height: var(--line-height-snug);
		color: var(--color-text-heading);
		margin-bottom: var(--gap-md);
	}
	.membership-info__intro,
	.membership-info__intro p {
		font-family: var(--font-secondary);
		font-size: var(--font-size-md);
		line-height: normal;
		color: var(--color-text-body);
		margin-bottom: var(--gap-lg);
	}
	.membership-info__body {
		font-family: var(--font-secondary);
		font-size: var(--font-size-sm);
		line-height: var(--line-height-normal);
		color: var(--color-text-body);
		display: flex;
		flex-wrap: wrap;
		flex-direction: column;
		flex-direction: row;
		gap: var(--gap-lg);

		@media screen and (max-width: 768px) {
			flex-direction: column;
		}
		p, ul, ol {
			line-height: normal;
		}
		ul, ol {
			font-size: var(--font-size-md);
			margin-bottom: var(--gap-lg);
			margin-left: 40px;
		}
	}
	.membership-info__body-left, .membership-info__body-right {
		width: calc(50% - 20px);

		@media screen and (max-width: 768px) {
			width: 100%;
		}
	}
	.membership-info__body-right {
		display: flex;
		flex-direction: column;
	}
	.membership-info__body h3,
	.membership-info__body h4 {
		font-size: var(--font-size-md);
		color: var(--color-text-dark);
		margin-top: var(--gap-lg);
		margin-bottom: var(--gap-xs);
		font-weight: var(--font-weight-medium);
	}
	.membership-info__body h3:first-child,
		.membership-info__body h4:first-child {
			margin-top: 0;
	}
	.membership-info__body .membership-info__body-right ul {
		margin-bottom:16px;
	}
	.membership-info__body ul li {
		line-height: var(--line-height-normal);
		position:relative;
	}
	.membership-info__body ul li:last-child {
		margin-bottom:0;
	}
	.membership-info__body ul li:before {
		content: '';
		width: 4px;
		height: 4px;
		position: absolute;
		left: -14px;
		top: 10px;
		border-radius: 100%;
		background-color: #524E4B;
	}
	.membership-info__body p {
		margin-bottom: var(--gap-md);
	}
	.membership-info__body h3 {
		font-weight: 700;
	}
	.membership-info__content {
		width: calc(100% - 450px);

		@media screen and (max-width: 1200px) {
			width: 100%;
		}
	}
	.membership-info__gallery {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		gap: var(--gap-2xl);
		width: 410px;
		flex: 1;

		@media screen and (max-width: 1200px) {
			width: 100%;
			flex-direction: row !important;
			margin-top: var(--gap-2xl);
		}
		@media screen and (max-width: 768px) {
			flex-direction: column !important;
		}
	}
	.membership-info__image {
		border-radius: var(--radius-md);
		overflow: hidden;
		flex: 1;
		display: flex;
	}
	.membership-info__image img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		display: block;
	}
	.membership-info__bottom-images {
		margin-top:14px;
	}
	@media (min-width: 768px) {
		.membership-info__title {font-size: var(--font-size-3xl);}
		.membership-info__body {flex-direction: row;gap: var(--gap-2xl);}
		.membership-info__body h3,
		.membership-info__body h4 {break-after: avoid;margin-bottom: 2px;}
		.membership-info__body ul {break-inside: avoid;max-width: 88%;}
	}
	@media (min-width: 1024px) {
		.membership-info__inner {gap: var(--gap-2xl);padding-top:60px;}
		.membership-info__title {font-size: var(--font-size-4xl);}
		.membership-info__gallery {flex-direction: column;}
		.membership-info__image img {min-height: 231px;}
	}
}