.cmp-staff-profile-widget__container {
  margin-bottom: 20px;
  border: 1px solid #ececec;
  padding: 20px;
  border-radius: 12px;
  box-shadow: var(--shadow-elevation-low);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
.cmp-staff-profile-widget__container:before,
.cmp-staff-profile-widget__container:after {
  content: "";
  display: table;
  line-height: 0;
}
.cmp-staff-profile-widget__container:after {
  clear: both;
}
.cmp-staff-profile-widget__thumb {
  flex-basis: 25%;
}
.cmp-staff-profile-widget__thumb-image {
  border-radius: 12px;
  aspect-ratio: 1;
  object-fit: cover;
  object-position: center top;
}
.cmp-staff-profile-widget__thumb > a {
  height: 100%;
  display: inline-block;
}
.cmp-staff-profile-widget__contact {
  padding: 0 0 0 20px;
  flex-basis: 75%;
}
.cmp-staff-profile-widget__contact h2,
.cmp-staff-profile-widget__contact h3,
.cmp-staff-profile-widget__contact h4,
.cmp-staff-profile-widget__contact h5,
.cmp-staff-profile-widget__contact h6 {
  margin-top: 0;
}
.cmp-staff-profile-widget__details > ul {
  list-style-type: none;
  margin-left: 0;
  padding-left: 0;
}
.cmp-staff-profile-widget__name {
  font-size: 1.5em;
  font-family: var(--headline-font);
  text-transform: none;
  -webkit-font-smoothing: antialiased;
  color: #000;
  margin: 20px 0;
  line-height: 1;
  font-weight: var(--heading-bold-weight);
}
.cmp-staff-profile-widget__property {
  font-size: 0.85rem;
}
.cmp-staff-profile-widget__property-name {
  font-weight: var(--body-bold-weight);
}
body #content li.cmp-staff-profile-widget__property {
  margin-bottom: 0;
}
body #content .cmp-staff-profile-widget__contact p {
  font-size: 1rem;
}
body .cmp-staff-profile-widget__bio {
  flex-basis: 100%;
  margin: 20px 0 0 0;
}
body .cmp-staff-profile-widget__bio > :last-child {
  margin-bottom: 0;
}

/*
	The LESS parser does not recognize @container and quietly fails if @container is included in the .less file.
	See "Support for recently added CSS functionality container-queries", issue #3766, at
	https://github.com/less/less.js/issues/3766.  (Retrieved July 18, 2023)

	To work around this, the @container and related rules are included in this separate .css file.
 */ 

.cmp-staff-profile-widget {
	container-type: inline-size;
}

@container (max-width: 350px) {

	.cmp-staff-profile-widget__container {
		display: block;
	}

	.cmp-staff-profile-widget__thumb {
		max-width: 75%;
		margin-inline: auto;
		margin-block-end: 1rem;
	}

	.cmp-staff-profile-widget__contact {
		padding: 0;
	}

}