@media (max-width: 768px) {
  .menu {
    display: flex;
  }

  .menu .close {
    right: 2.6rem;
    top: 6.6rem;
    font-size: 1rem;
  }

  .menu .list {
    display: flex;
    flex-direction: column;
    width: 50%;
    overflow-y: auto;
    /* Nice scrolling behavior */
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
    /* Firefox */
    scrollbar-width: thin;
    /* auto | thin | none */
    scrollbar-color: #fee28e transparent;
    /* thumb | track */
    /* WebKit/Chromium */
    gap: 4.8rem;
  }

  .menu .list::-webkit-scrollbar {
    width: 10px;
  }

  .menu .list::-webkit-scrollbar-track {
    background: transparent;
  }

  .menu .list::-webkit-scrollbar-thumb {
    background-color: #fee28e;
    /* soft gold */
    border: 2px solid #260a0a;
    /* matches panel bg */
    border-radius: 999px;
    /* pill thumb */
  }

  .menu .list::-webkit-scrollbar-thumb:hover {
    background-color: #fee28e;
  }

  .menu .list::-webkit-scrollbar-corner {
    background: transparent;
  }

  .menu .list .col {
    width: 100%;
  }

  .menu .list .col h1 {
    margin-bottom: 3rem;
  }

  .menu .list .col h1 a {
    font-size: 3.5rem;
  }

  .menu .image-container {
    width: 50%;
  }

  .menu .image-container img {
    width: 100%;
    margin-top: -12rem;
  }

  .home_Banner {
    padding: 20rem 0 5rem;
  }

  .home_Banner .bg {
    top: 34%;
  }

  .home_Banner .image img {
    max-width: 15rem;
  }

  .home_Banner .image h1 {
    font-size: 1.2rem;
    word-spacing: 0.8vw;
  }

  .home_Banner h2 {
    margin-top: 20rem;
  }

  .home_Banner p {
    font-size: 1.2rem;
    max-width: 25rem;
    margin-top: 6rem;
    margin-bottom: 6rem;
  }

  .home_stories {
    padding: 5rem 8% 10rem;
  }

  .home_stories .bg {
    width: 88%;
    top: 76%;
  }

  .home_stories .block {
    gap: 0rem;
  }

  .home_stories .block h1 {
    font-size: 1rem;
  }

  .home_stories .block .image {
    margin-bottom: 2rem !important;
  }

  .home_stories .block1 {
    flex-direction: column;
    gap: 2.2rem;
    margin-bottom: 22rem;
  }

  .home_stories .block1>.c1 {
    width: 100%;
    padding-left: 25%;
  }

  .home_stories .block1 .c1 h1 {
    font-size: 6.2rem;
  }

  .home_stories .block1>.c2 {
    width: 100%;
    padding-left: 25%;
  }


  .home_stories .block1 .c2 .hoverBox {
    padding: 4%;
    justify-content: space-between;
  }

  .home_stories .block1 .c2 .hoverBox .c1 h1 {
    font-size: 2rem;
  }

  .home_stories .block1 .c2 .hoverBox .c2 p {
    font-size: 1.2rem;
  }

  .home_stories .block1 .c2 .hoverBox .c1 {
    width: 30%;
  }

  .home_stories .block1 .c2 .hoverBox .c2 {
    width: 70%;
    display: none;
  }


  .home_stories .block2 {
    order: 9;
    margin-right: 5%;
  }

  .home_stories .block2 .c1 {
    display: none;
  }

  .home_stories .block2 .c2 {
    width: 100%;
  }

  .home_stories .block2 .c2 h1 {
    margin-bottom: 15rem;
  }

  .home_stories .block2 a {
    font-family: var(--font-Necto-Mono);
    font-size: var(--font16);
    font-weight: normal;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.5;
    letter-spacing: 1.12px;
    text-align: left;
    color: #260a0a;
    text-transform: uppercase;
    align-self: flex-start;
  }

  .home_stories .block3 {
    margin-top: unset;
    margin-bottom: 11rem;
  }

  .home_stories .block3 .c1 {
    width: 100%;
    max-width: 22.5rem;
  }

  .home_stories .block3 .c1 h1 {
    margin-bottom: unset;
  }

  .home_gatheredWords {
    flex-direction: column;
    padding: 7.7rem 8%;
    min-height: unset;
  }

  .home_gatheredWords .text {
    width: 100%;
  }

  .home_gatheredWords .text h1,
  .home_gatheredWords .text h2 {
    font-size: 16rem;
  }
}

@media (max-width: 768px) and (max-width: 575px) {

  .home_gatheredWords .text h1,
  .home_gatheredWords .text h2 {
    font-size: 11rem;
    line-height: 1.3;
  }
}

@media (max-width: 768px) {
  .home_gatheredWords .text h2 {
    margin-top: 3rem;
  }

  .home_gatheredWords .text h3 {
    width: 100%;
    font-size: 1rem;
  }

  .home_gatheredWords .text p {
    font-size: 1rem;
    word-spacing: unset;
    text-align: center;
  }

  .home_gatheredWords .right {
    width: 100%;
    align-items: flex-end;
  }

  .home_gatheredWords .right .image {

    max-width: 29rem;
    width: 100%;
  }

  .home_gatheredWords .right img {
    width: 100%;
    margin-bottom: 5.5rem;
  }

  .home_gatheredWords .right a {
    align-self: flex-start;
    margin-left: unset;
  }

  .home_theCurator {
    padding: 7.5rem 8% 12rem;
  }

  .home_theCurator .head {
    margin-bottom: 7.5rem;
  }

  .home_theCurator .head h1 {
    font-size: 1.2rem;
    word-spacing: 8px;
  }

  .home_theCurator .content {
    flex-direction: column;
    gap: 0rem;
  }

  .home_theCurator .content .bg {
    position: absolute;
    right: 0%;
    transform: translateX(50%);
    width: 70%;
    top: 30%;
  }

  .home_theCurator .content .c1,
  .home_theCurator .content .c2 {
    width: 100%;
  }

  .home_theCurator .content .c1 {
    width: 60%;
    margin-bottom: 12rem;
  }

  .home_theCurator .content .c2 h1 {
    font-size: 6rem;
    width: 70%;
    margin-bottom: 1.3rem;
  }


  .events_banner {
    min-height: unset;
  }

  .products_items {
    position: relative;
    display: flex;
    flex-direction: column;
    aspect-ratio: unset;
    padding: 5rem 8%;
  }

  .products_items a {
    position: relative;
    left: unset !important;
    top: unset !important;
    width: unset !important;
    transform: unset !important;
    width: 100% !important;
    display: flex;
  }

  .products_items a:nth-child(even) {
    justify-content: flex-end;
  }

  .products_items a:nth-child(1) {
    justify-content: flex-end;
  }

  .products_items a:nth-child(4) {
    justify-content: flex-start;
  }

  .products_items a:nth-child(5) {
    justify-content: flex-end;
  }

  .products_items a img {
    width: 50% !important;
  }

  .products_items .item-1 {
    order: 3;
  }

  .products_items .item-2 {
    order: 1;
  }

  .products_items .item-3 {
    order: 2;
  }

  .products_items .item-4 {
    order: 4;
  }

  .products_items .item-5 {
    order: 5;
  }






  /* !here and now page  */



  .hereAndNow_banner {
    flex-direction: column;

    padding-top: 15rem;
    padding-bottom: 30rem;
  }


  .hereAndNow_banner .c1 {
    width: 100%;
  }

  .hereAndNow_banner .c2 {
    width: 100%;
  }


  .hereAndNow_banner .c1 h1 {

    font-size: 10rem;
    margin-bottom: 1rem;
    max-width: 28rem;

  }

  .hereAndNow_banner .c1 p {
    font-size: 1.5rem;
  }




  .hereAndNow_echos {
    flex-direction: column;
    gap: 0;
    min-height: unset;
  }


  .hereAndNow_echos .bg {
    position: absolute;
    left: 0;
    top: 19%;
    transform: translateY(-50%);
    z-index: 5;
    /* height: 34rem; */
    width: 35%;
    height: auto;
  }


  .hereAndNow_echos .c1 {
    width: 100%;
  }

  .hereAndNow_echos .c2 {
    width: 100%;
  }






  .hereAndNow_echos .c1 img {
    width: 100%;
    object-fit: cover;
    padding: 12rem 1rem;
    height: 100%;
    max-width: 91rem;
  }





  .hereAndNow_echos .c1::before {

    right: -9%;

    font-size: 1rem;

    word-spacing: 10px;

  }



  .hereAndNow_echos .c2 {
    padding: 12rem 0 7rem;
  }



  .hereAndNow_tabs .filter {
    display: flex;
    justify-content: space-between;

    gap: 1rem;
    overflow-x: scroll;
    width: 100%;
    flex-wrap: nowrap;
    gap: 6rem;

  }

  .hereAndNow_tabs .filter h1 {
    line-height: 1.5;
  }

  .hereAndNow_tabs .filter .block {
    flex-shrink: 0;
  }


  .hereAndNow_tabs .container .tab {
    flex-direction: column;
    gap: 3rem;
  }


  .hereAndNow_tabs .container .tab .c1 {
    width: 100%;
  }

  .hereAndNow_tabs .container .tab .c2 {
    width: 100%;
    gap: 4.8rem;
  }

  .hereAndNow_tabs .container .tab .c3 {
    width: 100%;
    padding-top: 15rem;
    gap: 5rem;
  }

  .hereAndNow_tabs .container .tab .c2 .image img {
    margin-bottom: 1.3rem;
  }

  .hereAndNow_tabs .container .tab .c2 .image h2 {
    font-size: 1.2rem;
  }

  .hereAndNow_tabs .container .tab .c3 .image {
    align-items: center;
  }

  .hereAndNow_tabs .container .tab .c3 .image img {
    width: 50%;
  }






  .hereAndNow_tabs .container .tab .c1 h1 {
    font-size: 6rem;
    margin-bottom: 5.5rem;

  }

  .hereAndNow_tabs .container .tab .c1 p {
    font-size: 1.2rem;
  }



  .about_Banner {

    padding: 20rem 0 20rem;

  }

  .about_Banner .image img {
    max-width: 15.6rem;
  }



  .about_Banner .image h1 {
    word-spacing: 9px;
    font-size: 1.2rem;
  }



  .about_about {
    flex-direction: column;
    gap: 5.5rem;
    padding: 7rem 6.9rem;
  }

  .about_about .c1 {
    width: 100%;
  }

  .about_about .c2 {
    width: 100%;
  }

  .about_about .c1 img {
    margin-bottom: 0rem;
  }

  .about_about .c2 h1 {
    font-size: 6rem;
    margin-bottom: 3rem;
  }

  .about_about .c2 p {
    font-size: 1.2rem;
  }



  .about_about .c2 p:nth-child(2) {
    margin-bottom: 3rem;
  }






  .about_about .bg {


    top: 101%;

    max-width: 15.8rem;
  }


  .about_theCurator {
    flex-direction: column-reverse;
    padding: 14rem 6.9rem 14rem;
  }

  .about_theCurator .c1 {
    width: 100%;
    padding: 4.1rem 0 0;

  }

  .about_theCurator .c2 {
    width: 100%;
    padding: 0rem 0;
  }

  .about_theCurator .c2 h1 {
    font-size: 5rem;

  }

  .about_theCurator .c1 p {
    font-size: 1.2rem;
    width: 91%;
  }



  .about_theCurator .c1::before {

    right: 0%;
    z-index: 55;
    font-size: 1rem;
    text-transform: uppercase;
    word-spacing: 10px;
    white-space: nowrap;
    top: -4%;
    transform: translate(50%, 0%) rotate(90deg);
  }



  .about_theShowspace {
    flex-direction: column;
    padding: 5rem 6.9rem 10rem;
    gap: 4rem;
  }


  .about_theShowspace .c1 {
    width: 100%;
    padding: 0rem 0;


  }

  .about_theShowspace .c2 {
    width: 100%;

    padding: 0rem 0;
  }


  .about_theShowspace .c1 h1 {
    font-size: 5rem;

  }

  .about_theShowspace .c2 p {
    font-size: 1.2rem;
    width: 91%;
  }


  .about_theShowspace .c2::before {

    right: -4%;
    z-index: 55;
    font-size: 1rem;
    text-transform: uppercase;
    word-spacing: 10px;
    white-space: nowrap;
    top: -4%;
  }




  .about_art {
    gap: 3.2rem;
    padding: 13rem 6.9rem 0rem;
  }


  .text_block {}



  .privacyPolicy_banner {
    flex-direction: column;
    gap: 5rem;
    padding: 16rem 8% 5rem;

  }

  .privacyPolicy_banner .c1 h1 {
    font-size: 6rem;
  }

  .privacyPolicy_banner .bg {
    position: absolute;
    left: 0;
    top: 20rem;
    max-width: 18rem;
  }

  .privacyPolicy_banner .c1 {
    width: 100%;

  }

  .privacyPolicy_banner .c2 {
    width: 100%;

  }


  .privacyPolicy_banner .c2>.head {
    margin-bottom: 7rem;
  }

  .privacyPolicy_banner .c2>.head>h1 {

    margin-bottom: 3.3rem;
  }


  .privacyPolicy_banner .c2 .content .block .head {
    display: flex;
    border-bottom: 1px solid #000000;
    margin-bottom: 2.9rem;
    padding-bottom: 2.9rem;
  }



  .text_art {

    gap: 7rem;
    padding: 10rem 8%;
  }

  .text_art h1 {
    font-size: 1.2rem;
  }

  .text_art img {
    width: 100%;
    max-width: 20rem;
  }



  .faq_banner {
    flex-direction: column;
    gap: 5rem;
    padding: 16rem 8% 5rem;
  }


  .faq_banner .c1 {
    width: 100%;

  }

  .faq_banner .c2 {
    width: 100%;


  }

  .faq_banner .c1 h1 {
    font-size: 6rem;
  }


  .faq_banner .bg {
    position: absolute;
    left: 0;
    top: 19rem;
    max-width: 22rem;
  }



  .faq_banner .c2>.head>h1 {
    margin-bottom: 5.9rem;
  }

  .faq_banner .content {
    gap: 8rem;
    z-index: 55;
  }

  .faq_banner .content .accordion .accordion-toggle {
    width: 100%;
    padding: 1.4rem 0;
  }

  .faq_banner .content .accordion .accordion-toggle .accordion-icon svg {
    width: 100%;
    width: 1rem;
  }





  .error_banner {
    padding: 8rem 8%;
    gap: 23rem;
  }

  .error_banner .text h1 {
    font-size: 5rem;
    margin-bottom: 7rem;
  }

  .error_banner .text {
    padding: 0 8%;
    top: 39%;
  }

  .error_banner .text p {
    margin-bottom: 5rem;
  }

  .error_banner .text h2 {
    font-size: 1rem;
    word-spacing: .2rem;
  }

  /* ============================ */





}









/* !menu on horizontal mobile  */


/* Extra fix for small-height landscape phones */
@media (max-width: 768px) and (orientation: landscape) {
  .menu {
    display: flex;
    flex-direction: column;
    /* stack content vertically */
    padding-top: 8rem;
    /* reduce massive top padding */
    height: 100vh;
    overflow-y: auto;
    overflow-x: hidden;
    /* stop horizontal breaking */
  }

  .menu .list {
    width: 100%;
    /* full width */
    max-height: calc(100vh - 16rem);
    /* leave space for close button + padding */
    flex: 1;
  }

  .menu .image-container {
    width: 100%;
    justify-content: center;
    margin-top: 2rem;
  }

  .menu .image-container img {
    width: 100%;
    height: auto;
    max-width: 40rem;
    /* optional: keep it reasonable */
  }
}

@media (max-width: 768px) and (orientation: landscape) {
  .menu {
    padding-top: 8rem;
    height: 100vh;
    overflow-y: auto;
    overflow-x: hidden;
  }

  .menu .list {
    width: 100%;
    flex: 1;
    max-height: calc(100vh - 16rem);
  }

  .menu .image-container {
    display: none;
  }
}


@media (max-width: 768px),
(max-height: 500px) and (orientation: landscape) {
  .menu {
    display: flex;
    padding-top: 12rem;
  }

  .menu .close {
    right: 2.6rem;
    top: 6.6rem;
    font-size: 1rem;
  }

  .menu .list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    flex-direction: column;
    width: 100%;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
    scrollbar-width: thin;
    scrollbar-color: #fee28e transparent;
    /* gap: 2rem; */
    margin-bottom: 5rem;
  }

  .menu .list::-webkit-scrollbar {
    width: 10px;
  }

  .menu .list::-webkit-scrollbar-track {
    background: transparent;
  }

  .menu .list::-webkit-scrollbar-thumb {
    background-color: #fee28e;
    border: 2px solid #260a0a;
    border-radius: 999px;
  }

  .menu .list::-webkit-scrollbar-thumb:hover {
    background-color: #fee28e;
  }

  .menu .list::-webkit-scrollbar-corner {
    background: transparent;
  }

  .menu .list .col h1 {
    margin-bottom: 6rem;
  }

  .menu .list .col h1 a {
    font-size: 2.5rem;
  }

  .menu .image-container {
    width: 50%;
    display: none;
  }

  .menu .image-container img {
    width: 100%;
  }

  .menu .list .col p {
    margin-bottom: 0;
  }
}

/* Portrait (vertical) layout */
@media (max-width: 768px) and (orientation: portrait) {
  .menu {
    display: flex;
    flex-direction: row;
  }

  .menu .list {
    display: flex;
    /* switch from grid to flex */
    width: 50%;
    flex-direction: column;
    /* 1 column */
    grid-template-columns: 1fr;
    /* safety override for the previous grid */
  }

  .menu .image-container {
    display: flex;
    /* show image container */
    width: 50%;
    /* full width in vertical */
    justify-content: center;
    align-items: center;
  }


  /* !product page new  */

  .productNew_banner {


    & .text {

      bottom: 50%;
      transform: translate(-50%, 50%);

      h1 {
        font-size: var(--font60);
        margin-bottom: 2.5rem;
      }

      p {
        font-size: var(--font10);
        word-spacing: 26px;
      }
    }
  }

  .productNew_text {
    flex-direction: column;
    gap: 3.3rem;
    padding: 3.3rem 8% 5rem;

    .c1 {
      width: 100%;
    }

    .c2 {
      width: 100%;
    }
  }

  .productNew_products {
    overflow: hidden;
    padding: 5rem 8% 6.3rem;

    & .filter {
      margin-bottom: 8rem;

      .row1 {
        white-space: nowrap;
        overflow-x: scroll;
      }

      .row2 {
        flex-direction: column;
        gap: 5rem;
      }
    }

    .filter-bar {
      flex-direction: column;
      align-items: flex-start;
      gap: 5rem;

      .clear-all {
        align-items: flex-start;
        margin-top: 5rem;
        font-family: var(--font-Baskerville);
        font-size: 1.6rem;
        text-transform: capitalize;
        margin-left: unset;
      }
    }


    .dropdown-content {

      display: grid !important;
      grid-template-columns: repeat(2, 1fr);
      margin-top: 3.7rem;

      h1 {
        font-size: 1.2rem;
        font-family: var(--font-instrument-sans);
      }
    }


  }







  .productNew_products {
    & .productListing {
      grid-template-columns: repeat(1, 1fr);
      gap: 8.5rem;

      & .card {
        h1 {
          font-size: 2.2rem;
        }

        .text {
          p {
            font-size: 1.4rem;
          }

          span {

            font-size: 1.4rem;
          }
        }
      }
    }
  }





  .productNew_inFocus {
    padding: 9rem 8% 9rem;

    & .head {
      flex-direction: column;

      & .c1 {

        width: 100%;

        h1 {
          font-size: 1rem;
          word-spacing: 0;
          margin-bottom: 1.2rem;
        }

        h2 {
          font-size: 4.8rem;
        }
      }

      .c2 {
        width: 100%;
      }
    }

    .content {
      grid-template-columns: repeat(1, 1fr);
      gap: 6rem;
      margin-bottom: 8rem;

      .card {
        img {
          margin-bottom: 2rem;

        }

        p {
          font-size: 1rem;
        }
      }


    }


    p {
      font-family: var(--font-instrument-sans);
      font-size: 1.2rem;
      font-weight: normal;
      font-stretch: normal;
      font-style: normal;
      line-height: 1.6;
      letter-spacing: normal;
      text-align: left;
      color: #ede0d0;
      max-width: 50rem;

    }

  }


  .postType_two_banner {
    .c2 {
      .head {
        margin-bottom: 3.4rem;

        h1 {
          font-size: 4rem;
          margin-bottom: .8rem;
        }
      }

      .content {
        gap: 0;
      }


      .mobile-wrapper {
        display: flex;
        justify-content: flex-start;
        gap: 4.5rem;
      }

      .object {
        margin-bottom: 2rem;
      }
    }
  }


  .postType_two_banner .c1 .image {
    margin-bottom: 2rem;
    width: 100%;
  }

  .postType_two_banner .c1 .image img {
    margin-bottom: 0;
  }

  .postType_two_banner .c2 .product_variety {
    grid-template-columns: repeat(auto-fit, 3rem);
  }

  .postType_two_banner .c2 .product_variety .variant {
    max-width: 3rem;
  }

  .postType_two_banner .back {
    top: 8rem;
  }

  .postType_two_banner .c2 .material {
    margin-bottom: 2rem;
  }

  .postType_two_banner .prev {
    left: 0rem;
    width: 2rem;
    transform: translateY(calc(-50% - 2rem));

  }

  .postType_two_banner .next {
    right: 0rem;
    width: 2rem;
    transform: translateY(calc(-50% - 2rem));

  }

  .postType_two_banner .c2 .buttons {
    gap: 1.5rem;
  }



  .postType_two_banner .c2 .artist .dropdown {
    display: flex;
    max-height: 0px;
    overflow: hidden;
    flex-direction: column;
    gap: 2.8rem;
    margin-top: 0rem;
    transition: all .3s ease-in-out;

    .artist-block {
      display: flex;
      gap: 2rem;

      img {
        max-width: 9rem;
        height: 11rem;
        aspect-ratio: 16/9;
        object-fit: cover;
      }

      p {
        font-family: var(--font-instrument-sans);
        font-size: 1rem;
        font-weight: normal;
        font-stretch: normal;
        font-style: normal;
        line-height: 1.6;
        letter-spacing: normal;
        text-align: left;
        color: #0f0e0e;
      }
    }

  }

  .postType_two_banner .c2 .artist h1 svg {
    transition: all .3s ease-in-out;
  }

  .postType_two_banner .c2 .artist.active h1 svg {

    transform: rotate(180deg);
  }

  .postType_two_banner .c2 .artist.active .dropdown {
    max-height: 1000px;
    margin-top: 6rem;
  }




  .postType_two_banner .c2 .para {
    p {
      font-size: 1rem;
    }
  }

  .productNew_gatheredWorld {

    padding: 9rem 0 9rem;

    & .text {
              top: 57%;
      h1 {
        text-align: center;
        font-size: 10rem;
        margin-bottom: 4rem;
      }

      p {
        font-size: 1.2rem;
        max-width: 80%;
      }

      h2 {
        font-size: 1.2rem;
        max-width: 90%;
                    word-spacing: 5px;
      }
    }
  }

.productNew_inFocus {
  position: relative;
  overflow: hidden;
}

.productNew_inFocus .content {
  display: flex;
  will-change: transform;
}
.productNew_inFocus {
    & .content {
        .card {
            display: flex;
            flex-direction: column;
            min-width: 85%;
        }
    }
}
}