/* about me ext info page reset all margins */
#aboutme_ext_info_css h1,
#aboutme_ext_info_css h2,
#aboutme_ext_info_css h3,
#aboutme_ext_info_css h4,
#aboutme_ext_info_css h5,
#aboutme_ext_info_css h6,
#aboutme_ext_info_css p,
#aboutme_ext_info_css a,
#aboutme_ext_info_css ul {
  margin: 0;
  padding: 0;
}

/* about me ext info page container main */
.aboutme_ext_info_container_main {
  display: grid;
  place-items: center;
  width: 100%;

  scroll-margin-top: calc(var(--variable_spacing_01) * 2.6);
}

/* about me ext info page container content */
.aboutme_ext_info_container_content {
  display: grid;
  grid-template-columns: 4fr 1fr; /* two equal columns for left and right content */
  width: calc(100% - 2 * var(--variable_spacing_01));
  border-radius: var(--variable_borderradius_03);
  margin-bottom: var(--variable_spacing_01);
  align-items: start; /* align items to the top of the grid */

  position: relative;
  z-index: 2;

  overflow: hidden;
}

/* about me ext info page left container */
.aboutme_ext_info_left_container {
  display: grid;
  grid-template-rows: auto auto; /* creates 3 rows */
  height: 100%; /* ensures the section takes up the full height */
  margin-right: var(--variable_spacing_01); /* adds space to the right, for text purposes */
}

/* about me ext info page left top container */
.aboutme_ext_info_left_top_container {
  display: grid;
  align-self: start; /* keep top content at the top */
}

/* about me ext info page left bottom container */
.aboutme_ext_info_left_bottom_container {
  display: grid;
  align-self: end; /* keep bottom content at the bottom */
}

/* about me ext info page container content item_margin */
.aboutme_ext_info_container_content h1, h2, h3, h4, h5, h6, p, a, ul, li {
  margin: var(--variable_spacing_01);
}




/* about me ext info page media queries */
@media only screen and (max-width: 1100px) {
  /* about me ext info page container content */
  .aboutme_ext_info_container_content {
    grid-template-columns: 1fr; /* Single column layout */
    grid-template-rows: auto auto; /* Two rows: one for the left, one for the right */
    justify-items: center; /* Center both containers horizontally */
    margin-bottom: var(--variable_spacing_01);
  }

  /* about me ext info page left container */
  .aboutme_ext_info_left_container {
    margin-right: 0; /* remove right margin */
  }
}