@media only screen and (max-width: 667px) {
  body,p,h6,h5 {font-size: 1rem; line-height: 1.5; padding: 0;}
  pre {font-size: .9rem !important;}
  
  nav { position: initial; width: 100%; padding: 1rem; overflow: initial !important;}
  main {margin: auto; width: 100%; margin-left: 0;padding: 0 1rem;}
  section {margin-top: 2rem;}

  .container,.box {padding: 0.7rem;}
  .p-sm-0{padding: 0;}

  .text-1,h1,.display-1 {font-size: 2rem;line-height: 1.3; margin-top: 1.2rem;}
  .text-2,h2 {font-size: 1.75rem;line-height: 1.4;}
  .text-3,h3 {font-size: 1.5rem;line-height: 1.5;}
  .text-4,h4 {font-size: 1.25rem;line-height: 1.6;}
  .text-5,h5 {font-size: 1rem;line-height: 1.7;}

  pre,p,textarea {font-size: 0.875rem;line-height: 1.8;}
  small {font-size: 0.75rem;line-height: 2;}
  a, .link {font-size: 0.875rem;line-height: 1.8;}

  input,textarea,pre,select,.btn {padding: 10px 15px;}

  .flex-sm-column {flex-direction: column;}
  .parent,.grid-4,.grid-3,.grid-2,.grid-2-1,.grid-2-1-1,.grid-3-1 {display: flex; flex-direction: column;}
  .gap-3 {gap: 0.7rem;}
  .card {padding: 15px;}

  .d-sm-none {display: none;}
  .d-sm-flex {display: flex;}
  .flex-row-md{flex-direction: row;}
  .py-5 {padding-top: 30px; padding-bottom: 30px;}

  iframe {height: 300px;}

  .vh-100{height: auto !important;}
}