.main-content {
  text-align: center;
  padding: 5em 1em;
  overflow-x: hidden;
}
.center-text {
  text-align: center;
}
.main-content > div h1 {
  color: #0d261a;
  padding: 1em;
}
.bio {
  padding: 0 1em;
  position: relative;
}
.bio-img,
[class*="bio-text"] {
  padding: 1em;
}
figure {
  aspect-ratio: 1/1;
}
figure img {
  width: 100%;
  height: 100%;
}
figcaption {
  padding: 0.4em;
}
.column-left {
  float: left;
}
.column-right {
  float: right;
}

.row::after {
  content: "";
  clear: both;
  display: table;
}

/* For mobile phones: */

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {
  /* For tablets: */

  [class*="bio-text"] {
    position: relative;
    top: 40px;
  }
  .bio-text-left {
    text-align: left;
  }
  .bio-text-right {
    text-align: right;
  }
}
/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {
  /* For desktop: */

  .journey,
  .bio {
    padding: 0.5em 3em;
  }
  [class*="bio-text"] {
    top: 50px;
  }
}

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {
  [class*="bio-text"] {
    top: 60px;
  }
}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {
  [class*="bio-text"] {
    top: 70px;
  }
}