/* Responsive layout for the German Poezdka Media site. */
@media screen and (max-width: 980px) {
  *, *::before, *::after { box-sizing: border-box; }

  #content {
    width: 100%;
    max-width: 960px;
    padding: 0 16px;
  }

  #menu {
    clear: both;
    float: none;
    width: auto;
    padding: 10px 0 16px;
  }
  #menu ul {
    float: none;
    display: flex;
    flex-wrap: wrap;
    gap: 4px 12px;
  }
  #menu li { float: none; margin: 0; }
  #menu li a {
    display: block;
    float: none;
    min-height: 40px;
    padding: 10px 4px;
  }

  #pitch { height: auto; }
  #slideshow {
    width: 100%;
    height: auto;
    aspect-ratio: 960 / 310;
    overflow: hidden;
  }
  #slideshow img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .overlay,
  #inner-pitch .overlay {
    float: none;
    width: auto;
    max-width: 100%;
    margin: 0;
    padding: 18px 16px;
    background: #222;
    opacity: 1;
  }

  #bits {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
  }
  .bit {
    float: none;
    width: auto;
    padding: 0 0 0 16px;
  }

  #main,
  .col-left,
  .col-right {
    float: none;
    width: 100%;
  }
  #main { clear: both; }
  #side {
    float: none;
    width: 100%;
    margin: 20px 0 0;
  }
  .header-image {
    width: 100%;
    height: auto;
  }
  .header-image img,
  #page img,
  .img,
  img {
    max-width: 100%;
    height: auto;
  }
  .img { width: 100%; }

  .half,
  .third {
    width: 100%;
    margin: 0 0 20px;
  }
  .blog-body { float: none; width: auto; }
  .blog-date { float: none; width: auto; text-align: left; }
  .left,
  .right { max-width: 48%; }

  #inner-pitch .overlay { width: auto; }
  input.text,
  textarea.text,
  input.submit,
  select,
  button {
    max-width: 100%;
  }
  textarea.text { width: 100%; }
  .table { display: block; max-width: 100%; overflow-x: auto; }
  #right { float: none; }
}

@media screen and (max-width: 640px) {
  body { font-size: 16px; }
  h1 {
    float: none;
    width: auto;
    margin: 0;
    padding: 18px 0;
  }
  h1 img { display: block; width: auto; max-width: 100%; height: auto; }
  #menu ul {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2px 8px;
  }
  #menu li a { padding: 10px 6px; }
  #bits { grid-template-columns: 1fr; gap: 16px; }
  #bits .bit { padding: 0 0 0 16px; }
  .left,
  .right {
    float: none;
    display: block;
    max-width: 100%;
    margin: 0 0 14px;
  }
  input.text,
  textarea.text,
  select,
  button { width: 100%; }
  #footer { padding: 24px 0 12px; }
  #footer a {
    display: inline-block;
    min-height: 36px;
    padding-top: 8px;
    padding-bottom: 8px;
  }
}