.cmp-staff-profile-widget__placeholder {
  font-family: var(--heading-font);
  font-size: 1.3rem;
  font-weight: 300;
  letter-spacing: -0.5px;
}
.cmp-staff-profile-widget__container {
  margin-bottom: 20px;
  border: 1px solid var(--bgsu-light-tan);
  padding: 20px;
  border-radius: 16px;
  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: 1px solid var(--bgsu-light-tan);
  border-radius: 8px;
  aspect-ratio: 1;
  -o-object-fit: cover;
  object-fit: cover;
  -o-object-position: center top;
  object-position: center top;
}
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
  .cmp-staff-profile-widget__thumb-image {
    border-width: 0.5px;
  }
}
.cmp-staff-profile-widget__thumb > a {
  height: 100%;
  display: inline-block;
}
.cmp-staff-profile-widget__name {
  font-size: 1.5rem;
  margin: 10px 0 0;
}
.cmp-staff-profile-widget__position {
  font-size: 1rem;
  margin-bottom: 1rem;
}
@media (max-width: 1199px) {
  .cmp-staff-profile-widget__position {
    font-size: .95rem;
    margin-bottom: 12px;
  }
}
@media (max-width: 991px) {
  .cmp-staff-profile-widget__position {
    margin-bottom: 14px;
  }
}
@media (max-width: 767px) {
  .cmp-staff-profile-widget__position {
    font-size: 1rem;
  }
}
.cmp-staff-profile-widget__pronouns {
  color: var(--bgsu-putty);
  font-size: .8rem;
  margin-bottom: 10px;
  margin-top: -1rem;
}
@media (max-width: 1199px) {
  .cmp-staff-profile-widget__pronouns {
    margin-top: -12px;
  }
}
@media (max-width: 991px) {
  .cmp-staff-profile-widget__pronouns {
    margin-top: -14px;
  }
}
.cmp-staff-profile-widget__properties {
  margin-bottom: 0 !important;
}
.cmp-staff-profile-widget__property {
  display: flex;
  gap: 10px;
  margin-bottom: 0 !important;
  padding-bottom: 6px;
}
@media (max-width: 1199px) {
  .cmp-staff-profile-widget__property {
    font-size: .85rem;
  }
}
@media (max-width: 767px) {
  .cmp-staff-profile-widget__property {
    font-size: 1rem;
    padding-bottom: 10px;
  }
}
.cmp-staff-profile-widget__icon {
  width: 14px;
}
.cmp-staff-profile-widget__icon.email {
  width: 16px;
}
.cmp-staff-profile-widget__icon svg {
  fill: var(--bgsu-brown);
}
.cmp-staff-profile-widget__contact {
  padding: 0 0 0 20px;
  flex-basis: 75%;
}
.cmp-staff-profile-widget__details > ul {
  list-style-type: none;
  margin-left: 0;
  padding-left: 0;
}
.cmp-staff-profile-widget__bio {
  flex-basis: 100%;
  margin: 20px 0 0 0;
}
.cmp-staff-profile-widget__bio > :last-child {
  margin-bottom: 0;
}
@media (max-width: 767px) {
  .cmp-staff-profile-widget__bio {
    margin-top: 10px;
  }
}
/* High Contrast Styling */
body.acc-contrast .cmp-staff-profile-widget__name {
  color: var(--bgsu-medium-orange) !important;
}
body.acc-contrast .cmp-staff-profile-widget__pronouns {
  color: var(--bgsu-light-tan);
}
body.acc-contrast .cmp-staff-profile-widget__icon svg {
  fill: var(--bgsu-sunset);
}

/*
	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: 450px) {

	.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;
	}

}