/* ===================== */
/*  ABOUT PAGE OVERRIDES */
/* ===================== */
.about-me
{
   display: flex; /* Switch to "flexible layout manager" mode. */
   flex-direction: row; /* Container elements will be kept in a row. */
}

.about-me-column1
{
   flex: 1; /* Take up as much, and equal, amount of space as possible. */
   padding: var(--default-element-spacing); /* Put padding on all sides as is the "default" style... */
}

.about-me-column2
{
   flex: 1; /* Take up as much, and equal, amount of space as possible. */
   padding: var(--default-element-spacing); /* Put padding on all sides as is the "default" style... */
}

.about-me__photo
{
   width: 100%; /* Take up full width. */
   height: auto; /* Keep proper height with "auto". */
   border: 1px solid var(--color-black); 
   margin-bottom: var(--default-element-spacing); /* A bit of room immediately after the photo. */
}

.about-me__location-map iframe
{
   width: 100%; /* Take up full width. */
   aspect-ratio: 1/1; /* Force a square map. */
   border: 1px solid var(--color-black);
   margin-bottom: var(--default-element-spacing); /* A bit of room after the map, like the photo. */
   display: block; /* Remove the tiny gap iframes get by default (they're inline by default). */
}

/* ================================ */
/*  SMALL-SCREEN / MOBILE OVERRIDES */
/* ================================ */
/* Everything below adjusts this page's layout for small screens (phones).
   Desktop styling above remains the default; these rules only apply when triggered. */

@media (max-width: 767px) /* One px below the 768px iPad Mini / tablet standard — phones get mobile, tablets & up keep desktop. */
{
   .about-me
   {
      flex-direction: column; /* Swap to stack the columns. */
      width: 100%;
   }

   .about-me-column1
   {
      height: 100%; /* Now in column-stacked, set height to 100% of content, no extra. */
      padding: var(--default-element-spacing); /* Put padding on all sides as is the "default" style... */
      padding-bottom: 0px; /* Now column-stacked (on top), so remove bottom padding to "flow" into next column. */
   }

   .about-me-column2
   {
      height: 100%; /* Now in column-stacked, set height to 100% of content, no extra. */
      padding: var(--default-element-spacing); /* Put padding on all sides as is the "default" style... */
      padding-top: 0px; /* Now column-stacked (on bottom), so remove top padding to "flow" from previous column. */
   }
}