/* One column version (mobile, etc) */
@media (max-width: 1000px) {

  @media (min-width: 700px) {
    .main-column > * {
      padding-left:  2.2em;
      padding-right: 2.2em;
    }
    .main-column > #div-profile-pic {
      padding-left:  0em;
      padding-right: 0em;
    }

    .main-column > .contact-container {
      padding-left:  0em;
      padding-right: 0em;
    }
  }

  #div-body-wrapper {
    grid-template-columns: auto;
    grid-template-rows:    auto;
  }

  #div-header-logo {
    grid-row:    auto;
    grid-column: auto;
  }

  #div-footer {
    grid-row:    auto;
    grid-column: auto;
  }

  #div-col-01 {
    grid-row:   auto;
    min-height: auto;
    width:      auto;
    max-width:  100vw;
  }

  .container-block-title {
    text-align: center;
  }

  #div-profile-pic {
    width: 100%;
    height: 0;
    padding-bottom: 50%; /* magic */
    position: relative;
    overflow: hidden;
  }
  
  .profile-pic {
    text-align: center;

    /* --- */
    padding: 0.5em;
    width: auto;
    height: auto;
    max-height: 100%;
    border-radius: 20px;
  
    /* Avoid layout shift */
    position: absolute;
    top: 0;
    left: 0;

    /* --- */
    /* margin: auto;
    right: 0;
    text-align: center;
    z-index: 1; */
  }
  
  .location {
    text-align: center;
  }

  .contact-container {
    text-align: center;

    width: 40%; /* or whatever width you desire */
    margin: 0 auto; /* Centers the container */
    text-align: left; /* Align text and icons to the left */
  }

  #div-col-02:before {
    display:        block;
    width:          100%;
    text-align:     center;
    font-size:      1.3em;
    line-height:    1.35;
    letter-spacing: -.03em;
    margin-bottom:  0.5em;
    margin-top:     0.3em;
    color:          #a6e22e;
    content:        'Experience';
  }

  #div-col-02 {
    grid-row:   auto;
    min-height: auto;
    margin-top: 0.5em;
  }

  #div-col-02 ~ .gradient {
    display: block;
  }

  #div-col-03 {
    grid-row:   auto;
    min-height: auto;
  }
}

/* Small devices, smartphones */
@media (max-width: 700px) {
  * {
    box-sizing: content-box;
  }

  body {
    padding: 0;
  }

  #div-body-wrapper {
    border-radius: 0px;
  }

  #div-header-logo {
    border-radius: 0px;
  }

  .profile-pic {
    padding: 0em;
  }

  #div-col-02 ~ .gradient {
    display: block;
  }

}