@media screen and (max-width: 1610px) {
  section .section-content .flex-container {
    display: block;
  }

  section .section-content .flex-container .text p {
    max-width: 100%;
  }
}

@media screen and (max-width: 1560px) {
  .landing-title h1 {
    font-size: 3em;
  }
}

@media screen and (max-width: 1345px) {
  section .title-container {
    display: block;
  }

  section .title-container h1 {
    font-size: 3em;
  }

  section .title-container .section-description {
    font-size: 1em;
  }

  section .title-container .section-image {
    display: none;
  }

  section.about h1 {
    font-size: 2em;
  }

  section .section-content .flex-container h2 {
    font-size: 1.4em;
  }

  section .section-content .flex-container img {
    height: 250px;
  }
}

@media screen and (max-width: 1200px) {
  .navbar .navigation {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    display: block;
    padding: 7em 2em;
    background-color: var(--white);
    border-left: solid 1px var(--border-color);
    z-index: -1;
    transition: all 200ms ease-in-out;
    transform: translateX(100%);
  }

  #menuToggle {
    display: block;
  }

  .navbar:has(#menuToggle #checkbox:checked) .navigation {
    transform: translateX(0);
  }

  .landing-title .actions {
    gap: 1em;
  }

  .ads {
    width: 100%;
  }
}

@media screen and (max-width: 1095px) {
  footer {
    display: block;
  }

  footer :not(:first-child) {
    margin-top: 2em;
  }

  section .section-content {
    width: 100%;
  }
}

@media screen and (max-width: 865px) {
  section .section-content .grid-container {
    grid-template-columns: repeat(1, 1fr);
  }
}

@media screen and (max-width: 850px) {
  th, td {
    display: block;
    width: 100%;
    box-sizing: border-box;
  }

  th, td {
    text-align: center;
  }
}

@media screen and (max-width: 770px) {
  .landing-title .actions {
    display: block;
    text-align: center;
  }
}

@media screen and (max-width: 565px) {
  form .actions {
    display: block;
  }

  form .actions button:not(:first-child) {
    margin-top: 1em;
  }
}

@media screen and (max-width: 485px) {
  .navbar .logo img {
    width: 200px;
  }
}