/*This css is for the display where the text is to the right of the image.*/
.board-bios-side-by-side img {
	width: 225px;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  object-position: top;
  border-radius: 50%;
  padding: 5px;
  background: linear-gradient(135deg, var(--tme-color-primary-1), var(--tme-color-primary-2));
  border: 4px solid #fff;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
}

.board-bios-side-by-side .l-layout__region.l-layout__primary, .board-bios-side-by-side .l-layout__region.l-layout__secondary, .board-bios-side-by-side .l-layout__region.l-layout__tertiary, .board-bios-side-by-side .l-layout__region.l-layout__quaternary{
  display: flex;
  align-items: center;
  justify-content: space-evenly;
}

.board-bios-side-by-side .paragraph.paragraph--type--text.paragraph--view-mode--default {
    width: 30%;
}

/*This css is for the display where the text is under the image.*/
.board-bios-stacked img {
  width: 225px;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  object-position: top;
  border-radius: 50%;
  padding: 5px;
  background: linear-gradient(135deg, var(--tme-color-primary-1), var(--tme-color-primary-2));
  border: 4px solid #fff;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
}

.board-bios-stacked .l-layout__region.l-layout__primary, .board-bios-stacked .l-layout__region.l-layout__secondary, .board-bios-stacked .l-layout__region.l-layout__tertiary, .board-bios-stacked .l-layout__region.l-layout__quaternary {
	justify-items: center;
}

/*Padding for the text from the image*/
.board-bios-stacked .paragraph.paragraph--type--text.paragraph--view-mode--default {
  padding-top: 1rem;
}

/*This css is for the circle around the image*/
.u-ca-center.rounded-image {
	justify-self: center;
  border-radius: 50%;
  padding: 5px;
  background: linear-gradient(135deg, var(--tme-color-primary-1), var(--tme-color-primary-2));
  border: 4px solid #fff;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
}

/*Mobile Responsiveness for both displays*/
.board-bios-stacked .l-layout__main, .board-bios-side-by-side .l-layout__main{
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
}