/**
 * Shared layout styles for all parts.
 */
.jpl-part {
	color: var(--jpl-text);
}

.jpl-inline-em {
	color: var(--jpl-em-color, #e55552);
	font-weight: 700;
}

.jpl-inline-mark {
	background: linear-gradient(transparent 58%, var(--jpl-mark-color, #fff1a8) 58%);
	font-weight: 700;
	padding: 0 .08em;
}

.jpl-part__inner {
	width: 100%;
}

.jpl-part__box {
	background: var(--jpl-bg);
	border: 1px solid var(--jpl-border);
	border-radius: var(--jpl-radius);
	box-shadow: var(--jpl-shadow);
	overflow: hidden;
}

.jpl-part__media img,
.jpl-part__image {
	display: block;
	width: 100%;
	height: auto;
}

.jpl-part__content {
	padding: 1.25rem;
}

.jpl-part__label,
.jpl-part__kicker {
	color: var(--jpl-accent);
	font-size: 0.875rem;
	font-weight: 700;
}

.jpl-part__title {
	font-size: 1.5rem;
	font-weight: 700;
	line-height: 1.4;
}

.jpl-part__subtitle {
	color: var(--jpl-muted);
	font-size: 1rem;
}

.jpl-part__text {
	margin: 0.75rem 0 0;
	line-height: 1.7;
}

.jpl-part__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	padding: 0 1.25rem 1.25rem;
}

.jpl-part__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 0.75rem 1.25rem;
	border-radius: 999px;
	font-weight: 700;
	text-decoration: none;
}

.jpl-part__button--primary {
	background: var(--jpl-main);
	color: #fff;
}

.jpl-part__button--secondary {
	background: var(--jpl-bg-soft);
	border: 1px solid var(--jpl-border);
	color: var(--jpl-main-dark);
}

.jpl-part__note {
	padding: 0 1.25rem 1.25rem;
	color: var(--jpl-muted);
	font-size: 0.875rem;
}

.jpl-part--margin-small {
	margin-block: 0.75rem;
}

.jpl-part--margin-medium {
	margin-block: 1.5rem;
}

.jpl-part--margin-large {
	margin-block: 2.5rem;
}

.jpl-part.jpl-mt-10 {
	margin-top: 10px !important;
}

.jpl-part.jpl-mt-20 {
	margin-top: 20px !important;
}

.jpl-part.jpl-mt-30 {
	margin-top: 30px !important;
}

.jpl-part.jpl-mt-40 {
	margin-top: 40px !important;
}

.jpl-part.jpl-mb-10 {
	margin-bottom: 10px !important;
}

.jpl-part.jpl-mb-20 {
	margin-bottom: 20px !important;
}

.jpl-part.jpl-mb-30 {
	margin-bottom: 30px !important;
}

.jpl-part.jpl-mb-40 {
	margin-bottom: 40px !important;
}

.jpl-section.jpl-mt-10 {
	margin-top: 10px !important;
}

.jpl-section.jpl-mt-20 {
	margin-top: 20px !important;
}

.jpl-section.jpl-mt-30 {
	margin-top: 30px !important;
}

.jpl-section.jpl-mt-40 {
	margin-top: 40px !important;
}

.jpl-section.jpl-mb-10 {
	margin-bottom: 10px !important;
}

.jpl-section.jpl-mb-20 {
	margin-bottom: 20px !important;
}

.jpl-section.jpl-mb-30 {
	margin-bottom: 30px !important;
}

.jpl-section.jpl-mb-40 {
	margin-bottom: 40px !important;
}

.jpl-section {
	position: relative;
	background: var(--jpl-section-bg, transparent);
}

.jpl-section__inner {
	width: 100%;
}

.jpl-section--article .jpl-section__inner {
	max-width: var(--jpl-article-width, 800px);
	margin-left: auto;
	margin-right: auto;
}

.jpl-section--container .jpl-section__inner {
	max-width: var(--jpl-container-width, 1180px);
	margin-left: auto;
	margin-right: auto;
}

.jpl-section--full {
	width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}

.jpl-section--full .jpl-section__inner {
	max-width: none;
}

.jpl-section--py-10 {
	padding-top: 10px;
	padding-bottom: 10px;
}

.jpl-section--py-20 {
	padding-top: 20px;
	padding-bottom: 20px;
}

.jpl-section--py-30 {
	padding-top: 30px;
	padding-bottom: 30px;
}

.jpl-section--py-40 {
	padding-top: 40px;
	padding-bottom: 40px;
}

.jpl-section--pt-10 {
	padding-top: 10px;
}

.jpl-section--pt-20 {
	padding-top: 20px;
}

.jpl-section--pt-30 {
	padding-top: 30px;
}

.jpl-section--pt-40 {
	padding-top: 40px;
}

.jpl-section--pb-10 {
	padding-bottom: 10px;
}

.jpl-section--pb-20 {
	padding-bottom: 20px;
}

.jpl-section--pb-30 {
	padding-bottom: 30px;
}

.jpl-section--pb-40 {
	padding-bottom: 40px;
}

.jpl-part--pc-only {
	display: block;
}

.jpl-part--sp-only {
	display: none;
}

@media (max-width: 767px) {
	.jpl-part--pc-only {
		display: none;
	}

	.jpl-part--sp-only {
		display: block;
	}
}

.jpl-part--tpl-image-left .jpl-part__box,
.jpl-part--tpl-image-right .jpl-part__box {
	display: grid;
	gap: 0;
}

@media (min-width: 768px) {
	.jpl-part--tpl-image-left .jpl-part__box {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
	}

	.jpl-part--tpl-image-right .jpl-part__box {
		grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
	}

	.jpl-part--tpl-image-right .jpl-part__media {
		order: 2;
	}
}