<!DOCTYPE html>
<html>
<body>
<style>
.about {
  display: flex;
  align-items: flex-start;   /* keeps image + text aligned at top */
  gap: 16px;                 /* space between photo and text */
}

.about img {
  width: 220px;              /* adjust size */
  flex: 0 0 220px;           /* don’t let it shrink */
  border-radius: 14px;       /* rounded corners */
  box-shadow: 0 4px 12px rgba(0,0,0,.15);
}

/* On phones, stack image above text */
@media (max-width: 700px) {
  .about {
    flex-direction: column;
    text-align: center;      /* center the text when stacked */
  }
  .about img {
    width: 100%;
    max-width: 300px;
    margin: 0 auto;          /* center the image */
  }
}

</html>
</body>