.content_banner-layout {
    color: var(--bies-peach-light);
    padding-block: max(3rem, calc(4.875 * var(--su)));
    background: var(--primary-color);
    border-radius: max(1rem, calc(1.5 * var(--su)));
}

.content_banner-layout .content {
	position: relative;
    font-weight: 600;
    font-size: var(--desktop-body-xl);
    line-height: 1.2;
    padding-inline: max(1.25rem, calc(3.75 * var(--su))) 0;
}
.content_banner-layout .content .pk-button {
    color: var(--primary-color);
    background: var(--bies-peach-light);
}

.content_banner-layout .content .pk-button svg path {
    fill: var(--primary-color);
}

.content_banner-layout .content .pk-button-group {
    margin-top: max(1.25rem, calc(2 * var(--su)));
}

.content_banner-layout .pk-image_wrap .pk-image_inner {
    position: absolute;
    right: 0;
    bottom: 0;
	width: 100%;
	display: flex;
	justify-content: flex-end;
}

.content_banner-layout .pk-music_note {
    position: absolute;
    right: max(-15rem, calc(-15 * var(--su)));
    bottom: 0;
}

/* Note baked into the .pk-illu_wrap illustration itself, floating near
   the character. transform-box:fill-box makes rotate/translate pivot
   around the path's own shape instead of the whole 817x497 SVG canvas. */
.content_banner-layout .pk-illu-note {
    transform-box: fill-box;
    transform-origin: center;
}

@media screen and (max-width: 993px) {
    .content_banner-layout .content {
        padding-inline: var(--pk-site-gutter);
    }

	.content_banner-layout .pk-image_wrap .pk-image_inner {
		display: none;
	}

	.content_banner-layout .pk-music_note {
    position: relative;
    right: max(-15rem, calc(-15 * var(--su)));
    bottom: 0;
}
}

@media screen and (max-width: 767px) {
}

@media screen and (min-width: 993px) and (max-width: 1200px) {
}

@media screen and (min-width: 1960px) {
}