/* --- Profile Image Styles --- */

.column-left img {
  width: 250px;
  display: block;  /* Allows margin auto to work */
  margin: 0 auto;  /* A trick to center a block element */
}


/* --- Responsive Column Layout --- */

/* 1. Mobile First Styles (Default) */
.column-left,
.column-center,
.column-right {
  width: 100%;
  float: none;
  display: block;
  margin-bottom: 80px;
}

.column-left {
  text-align: center; /* Center the left column's content */
}

.column-center, 
.column-right {
  text-align: left;  /* Keep other columns left-aligned */
}


/* 2. Desktop Styles (for screens 768px or WIDER) */
@media screen and (min-width: 768px) {

  .column-left {
    float: left;
    text-align: left;
    width: 30%;
  }

  .column-center {
    display: inline-block;
    width: 10%;
  }

  .column-right {
    float: right;
    width: 60%;
  }
}