@media screen and (max-width: 960px) {
  .p-gutter-y {
    padding-top: calc(var(--Pg) * 2);
    padding-bottom: calc(var(--Pg) * 2);
  }

  :root {
    --Fb: 1rem;
    --black: #0a0a0a;
    --off-white: #fcfcfc;
    --fg: var(--black);
    --bg: var(--off-white);
    --Pm: 24px;
    --Pg: 36px;
    --Px: 16px;
    --negPg: 24px;
    --Ps: 15px;
    --Ph: calc(0.5 * var(--Pm));
    --Pq: calc(0.2 * var(--Ph));
    --Pd: calc(2 * var(--Pm));
    --Hh: var(--Pg);
    --Hs: calc(100vh - var(--Hh));
    --Wf: calc(100% + (2 * var(--Pm)));
    --Wg: calc(100% + var(--Pm));
    --Ml: calc(-1 * var(--Pm));
    --fh1: 40px;
    --fh2: 19px;
    --fh3: 12px;
    --fp: 12px;
  }

  main {
    min-height: calc(100vh - 232px);
  }

  h1 {
    font-size: var(--fh1);
    font-family: "Soehne-Book";
    line-height: 40px;
    overflow-wrap: break-word;
    margin-left: -0.08em;
  }

  .grey {
    opacity: 1;
  }
  .grey.disable {
    opacity: 0.7;
  }

  .grey:not(.disable):hover {
    opacity: 1;
  }

  .px {
    padding-left: var(--Px);
    padding-right: var(--Px);
  }

  .py {
    padding-top: var(--Pg);
    padding-bottom: var(--Pg);
  }

  /* GRID STYLES */
  .grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    column-gap: 8px;
    width: 100%;
  }

  .grid > .first-half-mobile {
    grid-column: span 6;
    justify-self: start;
  }

  .grid > .second-half-mobile {
    grid-column: 9/-1;
    justify-self: start;
  }

  .grid > .full-mobile {
    grid-column: span 12;
    justify-self: start;
  }

  .filter {
    display: flex;
    column-gap: 24px;
    row-gap: 8px;
    flex-wrap: wrap;
    grid-column: 4/-1;
    justify-self: flex-end;
    justify-content: flex-start;
  }

  .about-image {
    order: 3;
    grid-column: span 12 !important;
  }

  .work-grid {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    width: 100%;
    gap: 16px;
  }

  .index-grid {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    width: 100%;
    gap: 16px;
  }

  section.padding-top {
    padding-top: 68px;
  }
  .margin-top-56 {
    margin-top: 48px;
  }

  .margin-bottom-56 {
    margin-bottom: 48px;
  }

  .home-desktop {
    display: none;
  }

  .home-mobile {
    display: block;
    position: relative;
  }

  .home-mobile {
    position: relative;
    height: 100vh;
    background: #eee;
  }

  .swiper {
    width: 100%;
    height: 100%;
    z-index: 1;
    background-color: var(--bg);
  }

  .swiper-slide {
    height: 100vh;
  }

  .swiper-slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .home-title-container > * {
    pointer-events: auto;
  }

  .home-title {
    filter: blur(2.5px);
    opacity: 0.7;
  }

  .home-title.active {
    filter: blur(0px);
    opacity: 1;
  }

  .home-title-container {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    transform: translateY(50%);
    left: 16px;
    height: auto;
    gap: 48px;
    z-index: 5;
    position: absolute;
    pointer-events: none;
  }

  .home-title-holder {
    display: flex;
    align-items: center;
    height: 100vh;
  }

  /* NAV */
  nav {
    display: none;
    position: fixed;
    flex-direction: column;
    gap: 24px;
    color: var(--fg);
    background-color: var(--bg);
    height: 100vh;
    width: 100vw;
    left: 0px;
    top: 0px;
    transition: all 1s ease 0.2s;
  }

  nav.active {
    display: flex;
  }

  header > .dark-mode-toggle {
    display: none;
  }

  header > .dark-mode-toggle.active {
    display: inherit;
  }

  .dark-mode-toggle.active > .dark-mode-heading-home {
    color: var(--fg);
  }

  nav {
    position: fixed;
    flex-direction: column;
    left: 0;
    top: 0;
    width: 100vw;
    /* z-index: 10011; */
    padding: 168px 16px;
  }

  nav a {
    position: relative;
    padding-bottom: 16px;
  }

  nav a::after {
    content: "";
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 1px;
    background-color: var(--ln);
    transition: all 1s ease 0.2s;
  }

  .hamburger {
    position: fixed;
    display: flex;
    flex-direction: column;
    right: 16px;
    top: 36px;
    gap: 4px;
  }

  .hamburger-line-home {
    display: block;
    width: 20px;
    height: 1.5px;
    background-color: var(--off-white);
    border-radius: 1px;
    transition: all 0.3s ease-in-out;
  }

  .hamburger.active .hamburger-line-home:nth-child(1) {
    transform: translateY(5.5px) rotate(45deg);
    background-color: var(--fg);
  }

  .hamburger.active .hamburger-line-home:nth-child(2) {
    opacity: 0;
  }

  .hamburger.active .hamburger-line-home:nth-child(3) {
    transform: translateY(-5.5px) rotate(-45deg);
    background-color: var(--fg);
  }

  .hamburger-line {
    display: block;
    width: 20px;
    height: 1.5px;
    background-color: var(--fg);
    border-radius: 1px;
    transition: all 0.3s ease-in-out;
  }

  .hamburger.active .hamburger-line:nth-child(1) {
    transform: translateY(5.5px) rotate(45deg);
  }

  .hamburger.active .hamburger-line:nth-child(2) {
    opacity: 0;
  }

  .hamburger.active .hamburger-line:nth-child(3) {
    transform: translateY(-5.5px) rotate(-45deg);
  }

  header > .column-end {
    position: fixed;
    left: 16px;
    top: 36px;
  }

  header > .layout-toggle-button {
    display: none;
  }

  /* FOOTER */
  footer {
    position: relative;
    bottom: 0;
    padding-left: 16px;
    padding-right: 16px;
    padding-top: 36px;
    padding-bottom: 88px;

    display: flex;
    justify-content: space-between;
    width: 100%;
  }

  footer > .column-end,
  footer > .column-sixteen {
    grid-column: auto;
    margin-left: auto;
  }

  footer > .column-end {
    margin-left: 24px;
  }

  /* PRIVATE PAGE */
  .private-page-grid > .column-seven {
    grid-column: 1 / 2 !important;
    justify-self: start;
  }

  /* PROJECT GRID */
  .project-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    width: 100%;
  }

  .project-grid > .column-one {
    grid-column: 1/2;
  }

  .project-grid > .column-four {
    grid-column: 4/5;
  }

  .project-grid > .column-eight {
    grid-column: 1/5;
    justify-self: start;
  }

  .project-grid > .column-twelve {
    grid-column: 1/5;
    justify-self: start;
  }

  /* video Styles  */

  .full-btn {
    display: none !important;
  }

  .full-btn-mobile {
    display: inline !important;
  }

  [data-fullscreen="true"] {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 100vw;
    height: 100vh;
    background: black;
    overflow: hidden; /* Prevent scrollbars */
  }

  @media (orientation: portrait) {
    [data-fullscreen="true"] video {
      max-width: none;
      max-height: 100vw;
      width: 100vh;
      height: auto;
      position: absolute;
      transform: rotate(90deg);
      transform-origin: center;
      object-fit: contain;
      aspect-ratio: auto !important;
    }

    [data-fullscreen="true"] div.video-controls-holder {
      width: 100vh;
      height: 100vw;
      transform: rotate(90deg);
      position: relative;
    }
  }

  [data-fullscreen="true"] .video-controls {
    position: absolute;
    bottom: 0px;
  }

  /* GALLERY STYLES */

  .mobile-layout-toggle {
    margin-top: 68px;
  }

  /* Random grid layout */
  .gallery-container[data-layout="random"] {
    width: 100%;
    padding-top: 0px;
    padding-left: 0px;
    padding-right: 0px;
    columns: 2;
    column-gap: 8px;
    justify-self: center;
  }

  .gallery-container[data-layout="random"] .gallery-item {
    break-inside: avoid;
    margin-bottom: 8px;
  }

  /* Masonry grid layout */
  .gallery-container[data-layout="masonry"] {
    padding-top: 0px;
    width: 100%;
    columns: 1;
  }

  .gallery-container[data-layout="masonry"] .gallery-item {
    break-inside: avoid;
    margin-bottom: 8px;
  }
}