@media (max-width: 799px) {
  body {
    /* scroll indicator */
    --si-width: 20px;
    /* image wrapper */
    /* --im-width: clamp(150px, calc(var(--co-min) * 0.3), 300px); */
  }

  #header {
    top: 5px;
  }

  #scroll-indicator {
    translate: calc(var(--si-width) * 0.5);
  }

  .home-section {
    .home-section-title {
      top: 65px;
      justify-content: center;
    }
  }

  /* #region opening */
  .opening-section-wrapper {
    width: max-content;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  .opening-text {
    width: auto;
    text-align: center;
    align-self: unset;
  }

  .opening-sub-title {
    margin-left: unset;
  }

  /* #region about me  */
  .about-section-wrapper {
    flex-direction: column;
  }

  .action-suggest {
    padding: 10px 10px;
  }

  .about-content {
    width: min(100%, 40ch);
    position: relative;
    top: 20px;
  }

  .about-image-wrapper {
    --rotate: 0;
    rotate: none;
    position: relative;
    bottom: unset;
    transform-origin: center;
  }

  .server-image-wrapper {
    display: none;
  }

  .coffee-image-wrapper {
    top: 15px;
  }

  /* #region technology */

  .technology-section-wrapper {
    --max-diameter: 500px;
  }

  /* #region project */
  .project-section-wrapper {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, max-content));
    grid-template-areas:
      '. link .'
      '. slider .'
      'prev controls next';
    gap: 10px 20px;
    place-items: center;
  }

  .project-btn {
    grid-area: link;
    justify-self: center;
    align-self: end;
    bottom: 2lh;
  }

  .project-wrapper {
    --wrapper-width: min(calc(100vw - var(--si-width) * 2), 40ch);
    grid-area: slider;
    width: var(--wrapper-width);
    height: var(--wrapper-width);
    padding: 40px;
    overflow-y: hidden;
    overflow-x: visible;
  }

  .project-item {
    --item-width: var(--wrapper-width);
    justify-content: start !important;
  }

  .project-mobile-slider-previous {
    grid-area: prev;
    place-self: right;
    font-size: 2rem;
  }

  .project-mobile-slider-next {
    grid-area: next;
    place-self: left;
    font-size: 2rem;
  }

  .project-mobile-slider-control {
    grid-area: controls;
    justify-self: center;
  }

  /* all project overlay */
  #all-projects-overlay {
    .explore-root {
      --min-root-column: 300px;
    }
  }

  .all-projects-item {
    display: flex;
    flex-direction: column;

    .slider {
      width: min(400px, 100%);
      aspect-ratio: 16 / 9;
      margin: 0 auto;
    }
  }

  /* #region job */
  .job-link-timeline {
    bottom: 2lh;
  }

  .job-wrapper {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-areas:
      'logo logo'
      'name name'
      'resume resume'
      'date button';
    place-items: center;
    gap: 20px 2%;
  }

  .job-logo {
    padding: 20px;
  }

  .job-name {
    left: unset;
  }

  .job-date {
    left: unset;
    align-self: center;
  }

  .job-link {
    justify-self: unset;
  }

  /* #region contact */
  .contact-section-wrapper {
    --common-gap: 20px;
    /* full layout for inset form overlay */
    max-width: unset !important;
    max-height: unset !important;
    width: 100vw !important;
    height: 100vh !important;
    top: 0 !important;
    left: 0 !important;
    translate: 0 !important;
    /* --- */
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--common-gap);

    &:has(#contact-form-mobile-overlay.open) {
      z-index: var(--z-overlay);
    }
  }

  /* in front scroll indicator */

  .contact-info {
    max-width: 40ch;
    gap: var(--common-gap);
  }

  #contact-form-mobile-overlay {
    display: flex;
    isolation: isolate;
  }

  .contact-form {
    max-width: max-content;
    max-height: max-content;

    .field {
      max-width: 500px;
    }
  }
}