.hs-about{
	--hs-about-left: 58%;
}

/* Header: Title + line like other blocks */
.hs-about__header{
	margin-bottom: 18px;
}
.hs-about__title{
	margin: 0;
    font-size: 40px;
    line-height: 1.05;
    font-weight: 800;
    letter-spacing: .2px;
    color: #0b5673;
    padding: 0 0 10px;
}
.hs-about__rule{
    height: 2px;
    background: rgba(11, 86, 115, .85);
    margin: 0 0 18px;
}

/* Row */
.hs-about__row{
	display: flex;
	gap: 28px;
	align-items: flex-start;
}
.hs-about__row.is-reverse{
	flex-direction: row-reverse;
}

/* Col widths (left is flexible) */
.hs-about__col--media{
	flex: 0 0 var(--hs-about-left);
	max-width: var(--hs-about-left);
}
.hs-about__col--content{
	flex: 1 1 auto;
	min-width: 0;
}

/* Media: 100% width */
.hs-about__media{
	width: 100%;
	overflow: hidden;
}
.hs-about__media img{
	display: block;
	width: 100%;
	height: auto;
}

/* Placeholder like your other blocks: grey area */
.hs-about__media--placeholder{
	aspect-ratio: 4 / 3;
	background: #d9d9d9;
}

/* Mobile: stack */
@media (max-width: 767px){
	.hs-about__row,
	.hs-about__row.is-reverse{
		flex-direction: column;
	}

	.hs-about__col--media {
		width: 100%;
		max-width: 100%;
	}
}