.page-hero {
    width: stretch;
    max-width: 100%;
    height: 200px;
    position: relative;
    border-radius: 24px;
	overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: left;
    font-size: 24px;
    box-sizing: border-box;
    margin: 0 14px;
	margin-bottom: 24px;
}
.page-hero-overlay {    
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ffffff69;
}
.page-hero-background {
    z-index: -2;
    background-color: var(--semantic-surface-muted, #F2F2F2);
}
.page-hero .content {
  	width: 100%;
  	display: flex;
  	flex-direction: column;
  	align-items: flex-start;
  	padding: 24px;
  	box-sizing: border-box;
  	gap: 8px;
  	max-width: 100%;
    color: var(--semantic-text-on-brand, #121212);
    z-index: 1;
}
.page-hero .title {
	text-transform: uppercase;
    border-radius: var(--primitives-radius-none, 0);
    padding: 0 8px;
    background: var(--semantic-surface-brand, #FFE200);
}
.page-hero .subtitle {
  	color: var(--semantic-text-body, #5F5F5F);
    padding: 0 4px;
}
.page-hero .subtitle.variant-title {
    font-weight: 700;
  	color: var(--semantic-text-on-brand, #121212);
    background: var(--semantic-surface-brand, #FFE200);
}
.page-hero .subtitle.variant-title-inverted {
    font-weight: 700;
  	color: var(--semantic-text-body, #5F5F5F);
    background: var(--semantic-text-on-brand, #121212);
}
@media (min-width: 650px) {
  	.page-hero {
		height: 280px;
		padding: 32px;
		margin-bottom: 32px;
  	}
}
@media (min-width: 1100px) {
  	.page-hero {
		height: 320px;
		padding: 64px;
		margin-bottom: 64px;
  	}
    .page-hero .title {
        font-family: Poppins;
        text-transform: uppercase;
        line-height: var(--primitives-line-height-xl);
        padding: 0 16px;
    }
    .page-hero .subtitle {
        font-family: var(--primitives-font-families-mulish, Mulish);
        padding: 0 8px;
    }
    #hero-img {
        height: 100%;
        width: unset;
        right: 0;
        left: unset;
    }
}
@media (min-width: 1200px) {
    .page-hero {
        margin-right: 0;
        margin-left: 0;
	}
}