/* =tip */
.block-tip {
	border: 1px solid var(--wp--custom--color--neutral-400);
	margin-top: 56px !important;
	margin-bottom: var(--wp--custom--layout--block-gap-large) !important;
}

.block-tip .block-tip__inner {
	font-family: var(--wp--preset--font-family--primary);
	font-size: var(--wp--preset--font-size--large);
}

.block-tip .block-tip__title {
	text-align: center;
	font-family: var(--wp--preset--font-family--primary);
	line-height: var(--wp--custom--line-height--small);
	font-weight: 700;
	margin-bottom: 0;
	text-transform: uppercase;
	margin-top: 0;
	font-size: 1.25rem;
	transform: translateY(-19px);
}

.block-tip .block-tip__title strong {
	color: white;
	background: var(--wp--preset--color--primary) !important; /* important needed so bg color doesn't disappear when editing title in editor */
	/* =banner */
	/* note: also need padding, but that depends on viewport size */
	display: inline-block;
	clip-path: polygon(100% 0%, calc( 100% - 13px ) 50%, 100% 100%, 0% 100%, 13px 50%, 0% 0%); /* top right, middle right, bottom right, top left, middle left, bottom left */
}

.block-tip .block-tip__inner > .block-tip__title:first-child + * {
	margin-top: 0;
}


@media only screen and (max-width: 767px) {
	.block-tip {
		padding: 0px 16px 19px;
	}

	.block-tip .block-tip__title strong {
		padding: 6px 26px;
	}
}

@media only screen and (min-width: 768px) {
	.block-tip {
		padding: 0px 32px 26px;
	}

	.block-tip .block-tip__title strong {
		padding: 6px 28px;
	}
}