/**************************/
/* Below 2200px (desktops) */
/**************************/
@media (max-width: 137.5em) {
}

/**************************/
/* Below 1644px (desktops) */
/**************************/

@media (max-width: 103em) {
  nav ul li {
    margin: 2rem 2rem;
  }
  nav.sticky {
    padding: 1rem 6%;
  }
}

/**************************/
/* BELOW 1450px (Landscape Tablets) */
/**************************/
@media (max-width: 91em) {
  html {
    /* 9px / 16px  */
    font-size: 56.25%;
  }

  .profile .grid--2-cols {
    grid-template-columns: 1fr;
  }
  .profile .porttriangle {
    clip-path: polygon(0 0, 0% 100%, 50% 0);
  }
}
/**************************/
/* BELOW 1200px (Landscape Tablets) */
/**************************/

@media (max-width: 75em) {
  html {
    /* 9px / 16px  */
    font-size: 56.25%;
  }

  .hero .grid--2-cols {
    grid-template-columns: 1fr;
  }
  .grid--3-cols {
    grid-template-columns: 1fr;
  }

  .hero .grid {
    display: flex;
    flex-direction: column-reverse;
    justify-content: start;
  }

  .right-column .triangle {
    clip-path: polygon(0 0, 0% 100%, 50% 0);
  }

  .right-column {
    height: 60vh;
  }
  .welcome-img {
    width: 30vw;
  }
  .howtext {
    text-align: center;
  }

  .left-column {
    padding: 2rem;
  }
  .headklam {
    width: 70vw;
  }

  /* MOBILE NAVIGATION */
  .btn-mobile-nav {
    display: block;
    z-index: 9999;
  }

  .main-nav {
    background-color: rgb(0, 48, 53, 0.9);
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(10px);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    transform: translateX(100%);

    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.5s ease-in;

    /* Hide navigation */
    /* Allows NO transitions at all */
    /* display: none; */

    /* 1) Hide it visually */
    opacity: 0;

    /* 2) Make it unaccessible to mouse and keyboard */
    pointer-events: none;

    /* 3) Hide it from screen readers */
    visibility: hidden;
  }

  .nav-open .main-nav {
    opacity: 1;
    pointer-events: auto;
    visibility: visible;
    transform: translateX(0);
    z-index: 9999;
  }

  .nav-open .icon-mobile-nav[src="../icon/menu-outline.svg"] {
    display: block;
  }

  .nav-open .icon-mobile-nav[src="../icon/close-outline.svg"] {
    display: none;
  }

  .main-nav-list {
    flex-direction: column;
    gap: 4.8rem;
  }

  .nav-link:link,
  .nav-link:visited {
    font-size: 4rem;
  }
}

/**************************/
/* BELOW 944px (Tablets) */
/**************************/

@media (max-width: 59em) {
  html {
    /* 8px / 16px = 0.5 = 50% */
    font-size: 50%;
  }

  .grid--4-cols {
    grid-template-columns: repeat(2, 1fr);
  }
  .start {
    height: 94vh;
  }
  .portrait {
    margin: auto;
    text-align: center;
  }
  .portrait-img {
    width: 75vw;
  }
  .feature-text {
    font-size: 1.8rem;
  }
  .feature-icon {
    font-size: 5rem;
  }
  .heading-primary {
    font-size: 4.6rem;
    line-height: 1.2;
  }
  .heading-secondary {
    font-size: 2.8rem;
  }
}

/**************************/
/* BELOW 770px (Tablets) */
/**************************/
@media (max-width: 48em) {
  html {
    /* 8px / 16px = 0.5 = 50% */
    font-size: 50%;
  }
  .headklam {
    width: 80vw;
  }
  .welcome-img {
    width: 40vw;
  }
  .start {
    height: auto;
  }
  .imp-padding {
    margin: 3rem;
    padding: 2rem;
  }
}

/**************************/
/* BELOW 660px (Handy) */
/**************************/
@media (max-width: 41em) {
  html {
    /* 8px / 16px = 0.5 = 50% */
    font-size: 50%;
  }

  .low-gap {
    gap: 1.5rem;
  }

  .feature {
    text-align: center;
  }
  .howbody {
    font-size: 6rem;
  }
  .port2 {
    padding: 4rem;
  }
  .portcontent {
    padding: 4rem;
  }
}

/**************************/
/* BELOW 560px (Handy) */
/**************************/
@media (max-width: 35em) {
  html {
    /* 8px / 16px = 0.5 = 50% */
    font-size: 50%;
  }

  .logo {
    height: 4.4rem;
  }

  .header {
    padding: 0 3.5rem;
  }
  .welcome-img {
    width: 50vw;
  }
  .howbody {
    font-size: 5rem;
  }
  .headklam {
    width: 90vw;
  }
  .contact-logo {
    height: 9rem;
  }
}

/**************************/
/* BELOW 480px (Handy) */
/**************************/
@media (max-width: 29em) {
  html {
    /* 8px / 16px = 0.5 = 50% */
    font-size: 50%;
  }
  body {
    overflow: hidden;
  }
  .list {
    text-align: left;
  }
  .howbody {
    font-size: 4rem;
  }
}