@media (max-width: 78em) {
  .content-2::before,
  .content-4::before,
  .content-6::before,
  .content-1::before,
  .content-3::before,
  .content-5::before {
    content: none;
  }

  .section--work .grid,
  .section--portfolio .grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 70em) {
  .main-menu a:link,
  .main-menu a:visited {
    font-size: 2.074rem;
  }

  .section--about .grid {
    grid-template-columns: 1fr;
  }
  .profile-picture {
    width: 85%;
  }
}

@media (max-width: 66em) {
  html {
    font-size: 56.25%;
  }
}

@media (max-width: 57em) {
  .main-menu {
    gap: 3.6rem;
  }

  .section--skills .grid {
    grid-template-columns: repeat(6, 1fr);
  }
  .section--contact .grid {
    grid-template-columns: 1fr;
  }
  .contact-details {
    padding-top: 4.8rem;
  }
}

@media (max-width: 53em) {
  .main-menu {
    display: none;
  }

  .mobile-menu {
    display: block;
  }

  .mobile-icons:hover body {
    transform: translateX(-2rem);
  }
}

@media (min-width: 50.01em) {
  .time-graph-6 .flex-circle {
    margin-top: 1.8rem;
  }
}

@media (max-width: 50em) {
  .section--education .grid {
    grid-template-columns: 1fr 10fr;
  }
  .time-graph {
    grid-column: 1;
  }
  .text-box {
    grid-column: 2;
  }

  .flex-line {
    height: 140px;
  }
  .line-outer,
  .line-inner {
    height: 120px;
  }
}

@media (max-width: 38em) {
  html {
    font-size: 50%;
  }
  .section--work .grid,
  .section--portfolio .grid {
    grid-template-columns: 1fr;
  }

  .section--skills .grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (max-width: 32em) {
  .about-cta a {
    width: fit-content;
  }

  footer {
    flex-direction: column;
    text-align: center;
  }
}

@media (max-width: 28em) {
  h2 {
    font-size: 3.583rem;
  }
  .text-box {
    margin-top: unset;
  }
  .section--work .grid {
    grid-template-columns: 1fr;
  }

  .section--work figure:nth-child(1),
  .section--work figure:nth-child(2),
  .section--work figure:nth-child(3),
  .section--work figure:nth-child(4),
  .section--work figure:nth-child(5) {
    grid-column: 1;
  }
  .btn:link,
  .btn:visited {
    padding: 2.4rem;
  }
  .section-title {
    margin-bottom: 2.4rem;
  }

  .about-subheading {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (max-width: 24em) {
  .about-cta {
    display: flex;
    flex-direction: column;
    gap: 1.6rem;
    align-items: center;
  }
}

@media (max-width: 21em) {
  html {
    font-size: 43.75%;
  }
}