/* ------- 480px – 320px ------- */

@media (max-width: 321px) {
  /* all pages' header */
  header {
    padding-inline: 8px;
  }

  .burger {
    display: block;
    cursor: pointer;
  }

  .x-mark {
    display: none;
    cursor: pointer;
  }

  .menu-list {
    display: none;
  }

  /* ------- Home page ------- */

  /* home-section1 */
  .home-section1 {
    height: 320px;
  }

  /* home-section2 */
  .home-section2 {
    padding: 32px 0 32px 8px;
  }

  /* all pages' footer */
  footer {
    padding-block: 32px;
    flex-direction: column;
    row-gap: 40px;
    align-items: center;
    text-align: center;
  }

  .social-list {
    justify-content: center;
  }

  /* ------- Catalog page ------- */

  .filter span {
    display: none;
  }

  .catalog-section {
    padding: 40px 12px;
  }

  /* pagination */
  .pagination {
    padding: 64px 175px;
  }

  .page-btn.prev,
  .page-btn.next {
    font-size: 0;
    padding: 0;
    width: 40px;
    justify-content: center;
  }

  .page-btn.prev img,
  .page-btn.next img {
    width: 16px;
    height: 16px;
  }

  /* ------- Contact Us page ------- */

  main {
    padding: 48px 8px;
    height: auto;
  }

  .contact-wrapper {
    flex-direction: column;
    width: 100%;
    gap: 40px;
    height: auto;
  }

  form {
    row-gap: 24px;
  }

  .contact-title {
    font-size: 24px;
    line-height: 32px;
    margin-bottom: 24px;
  }

  .contact-form-row {
    flex-direction: column;
    row-gap: 24px;
  }

  .contact-submit-btn {
    width: 100%;
  }

  .contact-map {
    flex-direction: column;
    row-gap: 24px;
    padding: 0;
  }

  address {
    justify-content: center;
    column-gap: 42px;
  }

  iframe {
    width: 100%;
    height: 200px;
  }
}