@media (max-width: 1100px) {
  html {
    font-size: 80%;
  }

  .main-grid {
    grid-template-columns:
      1fr 1fr;
  }

  .has-grid {
    max-width: calc(2 * 25rem);
  }

  .desktop-background-grid {
    display: none;
  }

  .mobile-background-grid {
    display: grid;
    /* z-index: 99; */
  }

  .desktop-home-wrapper {
    grid-column: 1 / 3;
  }

  .info-text {
    padding-right: 1rem;
  }

  .header-footer-container {
    grid-template-columns: 1fr 1fr;
  }

  .header-footer-container picture {
    justify-content: end;
    display: flex;
  }

  .header-footer-container>a>picture {
    display: grid;
    justify-content: start;
  }

  /* ---------- MOBILE HOME PAGE ---------- */

  #desktop-ticker,
  #desktop-ticker-details,
  #infrastructures,
  #about,
  #archive,
  #search,
  #updates,
  #desktop-site-title,
  #menu-targets,
  .site-footer {
    display: none;
  }

  .home-landing-page {
    grid-template-rows: none;
    height: 100%;
  }

  #mobile-title {
    display: grid;
    grid-column: 1 / 3;
    grid-row: 1;
    margin-top: 6rem;
    grid-template-columns: subgrid;
  }

  .mobile-title-1 {
    grid-column: 1/2;
    grid-row: 1;
    display: flex;
    justify-content: end;
  }

  .mobile-title-2 {
    grid-column: 2/3;
    grid-row: 2;
  }


  .mobile-title-3 {
    grid-column: 1/3;
    grid-row: 3;
    display: flex;
    justify-content: center;
  }


  #mobile-menu-button {
    grid-column: 12 / 13;
    display: block;
    width: 4rem;
    pointer-events: auto;
  }

  #ticker-carousel {
    grid-column: 1 / 3;
    grid-row: 4;
    height: 500px;
    grid-template-columns: subgrid;
    margin-top: 6rem;
  }

  #carousel-indicators {
    grid-column: 1 / 2;
    display: flex;
    justify-content: space-between;
    /* margin-top: 4rem; */
  }

  .indicator {
    width: 15px;
    height: 15px;
    background-color: #E4E4E4;
    display: inline-block;
    transition: background-color 0.3s ease;
  }

  .indicator.active {
    background-color: #D84A4A
  }

  #ticker-detail-left {
    grid-column: 1 / 3;
    grid-row: 2;
    /* margin-top: 3rem; */
    font-size: 1.5rem;
  }

  #ticker-detail-right {
    grid-column: 2 / 3;
    /* grid-row: 4; */
    grid-row: 6;
    margin-top: 3rem;
    font-size: 1.2rem;

    display: flex;
    flex-direction: column;
  }

  .diagonal-wrapper {
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-55deg);
  }

  .diagonal-text {
    max-width: 20%;
  }

  #learn-more {
    grid-column: 1/ 3;
    /* grid-row: 6; */
    grid-row: 8;
    margin-top: 0;
  }

  #marginal-is {
    grid-column: 1 / 3;
    margin-top: 13.37rem;
  }

  #marginal-operates,
  #marginal-base,
  #why,
  #repository,
  #culture,
  #research,
  #collaboration,
  #generation,
  #sharing {
    grid-column: 1 / 3;
    margin-top: 4.25rem;
  }

  #programs,
  #archive-2 {
    grid-column: 2 / 3;
    margin-top: 5.68rem;
  }

  #link-programs,
  #link-archive,
  #link-manifesto {
    grid-column: 1 / 3;
    margin-top: 3.68rem;
  }

  #marginal {
    grid-column: 1 / 3;
    margin-top: 5.68rem;
  }



  /* ---------- MOBILE MENU ---------- */

  #mobile-menu-overlay {
    position: fixed;
    inset: 0;
    background: white;
    display: none;
    pointer-events: none;
    transition: opacity 0.3s ease;
    z-index: 1000;
    overflow-y: auto;
    /* padding-top: 15px; */
    height: 100vh;
  }

  #mobile-menu-overlay.open {
    display: grid;
    pointer-events: auto;
  }

  #mobile-menu-overlay #marginal-logo {
    /* margin-top: 10.5px; */
  }

  .close-menu-button-wrapper {
    grid-column: 2 / 3;
    grid-row: 1;
    display: flex;
    flex-direction: row;
    justify-content: end;
    align-items: start;
    /* margin-top: 10.5px; */
  }

  #close-menu-button {
    transform: rotate(180deg);
    width: 4rem;
  }

  .main-menu {
    grid-row: 2;
  }

  .language-container {
    grid-column: 1 /3;
    grid-row: 3;
    margin-top: 4rem;
  }

  .theme-container {
    grid-column: 1 /3;
    grid-row: 4;
    margin-top: 2rem;
  }

  .icon-container {
    grid-column: 1 /3;
    grid-row: 5;
  }

  .icons-container {
    grid-row: auto;
    margin-top: 32px;
  }

  .social-media-icon {
    width: 2.5rem;
    height: 2.5rem;
  }

  .main-content {
    grid-column: 1 / 3;
    grid-template-columns: 1fr 1fr;
  }

  /* ---------- INFRASTRUCTURES ---------- */

  #infrastructures-wrapper {
    grid-column: 1 / 3;
    display: flex;
    flex-direction: column;
    margin-bottom: 20rem;
    gap: 0.5rem;
  }

  .sub-menu-item {
    width: 100%;
    border-top: 1px solid black;
    cursor: pointer;
    padding: 0;
  }

  .content-block {
    display: none;
    padding: 1.5rem 0;
  }

  .content-block.active {
    display: block;
  }

  /* .content-block>div {
    margin-top: 0.5rem;
  } */

  .sub-menu-item[data-target="open_practice_society"] {
    order: 1;
  }

  .infrastructure-content-block[data-content="open_practice_society"] {
    order: 2;
  }

  .sub-menu-item[data-target="otherwise_residency"] {
    order: 3;
  }

  .infrastructure-content-block[data-content="otherwise_residency"] {
    order: 4;
  }

  .sub-menu-item[data-target="arch"] {
    order: 5;
  }

  .infrastructure-content-block[data-content="arch"] {
    order: 6;
  }

  .sub-menu-item[data-target="mic_matters"] {
    order: 7;
  }

  .infrastructure-content-block[data-content="mic_matters"] {
    order: 8;
  }

  /* ---------- ABOUT ---------- */

  #about-wrapper {
    grid-column: 1 / 3;
    display: flex;
    flex-direction: column;
    margin-bottom: 15rem;
    gap: 0.5rem;
  }

  .sub-menu-item[data-target="vision_mission"] {
    order: 1;
  }

  .content-block[data-content="vision_mission"] {
    order: 2;
  }

  .sub-menu-item[data-target="manifesto"] {
    order: 3;
  }

  .content-block[data-content="manifesto"] {
    order: 4;
  }

  .sub-menu-item[data-target="contact"] {
    order: 5;
  }

  .content-block[data-content="contact"] {
    order: 6;
  }

  .sub-menu-item[data-target="core_team"] {
    order: 7;
  }

  .content-block[data-content="core_team"] {
    order: 8;
  }

  .sub-menu-item[data-target="partners"] {
    order: 9;
  }

  .content-block[data-content="partners"] {
    order: 10;
  }

  .sub-menu-item[data-target="funders"] {
    order: 11;
  }

  .content-block[data-content="funders"] {
    order: 12;
  }

  .sub-menu-item[data-target="support_us"] {
    order: 13;
  }

  .content-block[data-content="support_us"] {
    order: 14;
  }

  .sub-menu-item[data-target="annual_activity_reports"] {
    order: 15;
  }

  .content-block[data-content="annual_activity_reports"] {
    order: 16;
  }

  .sub-menu-item[data-target="logo_visual"] {
    order: 17;
  }

  .content-block[data-content="logo_visual"] {
    order: 18;
  }

  .content-block>div:nth-child(7n+1) {
    grid-column: 1/3;
  }

  .content-block>div:nth-child(7n+2) {
    grid-column: 1/3;
  }

  .content-block>div:nth-child(7n+3) {
    grid-column: 1/3;
  }

  .content-block>div:nth-child(7n+4) {
    grid-column: 1/3;
  }

  .content-block>div:nth-child(7n+5) {
    grid-column: 1/3;
  }

  .content-block>div:nth-child(7n+6) {
    grid-column: 1/3;
  }

  .content-block>div:nth-child(7n) {
    grid-column: 1/3;
  }

  .content-title {
    display: block;
    margin-top: 4rem;
  }

  .content-text {
    margin-top: 2rem;
  }

  .core-team .content-title {
    display: inline;
    margin-top: 0;
  }

  .core-team {
    margin-bottom: 64px;
  }

  .download-identity-bundle-card {
    height: 280px;
  }

  .activity-report-card {
    height: 340px;
  }

  .activity-report-card-header {
    gap: 16px;
  }

  .activity-report-card .file-badge {
    padding-right: 34px;
  }

  .activity-report-card-img {
    height: 140px;
    width: calc(100% + 40px);
  }

  .identity-bundle-card-title {
    margin-top: 15px;
  }

  /* ---------- UPDATES ---------- */

  #updates-main-container {
    display: grid;
    grid-column: 1 / 3;
    grid-template-columns: inherit;
  }

  .update-title {
    grid-column: 1 / 3;
  }

  #updates-menu-wrapper,
  #updates-content-wrapper {
    grid-column: 1 / 3;
  }

  .update-detail-content.hidden {
    display: none;
  }

  .update-detail-content,
  .update-body {
    margin-top: 1rem;
    grid-column: 1 / 3;
    display: grid;
    grid-template-columns: inherit;
    margin-bottom: 1rem;
  }

  .update-image-block>figcaption,
  .update-icon-block>span {
    grid-column: 1 / 3;
  }

  .update-icon-block>img {
    grid-column: 1 / 3;
    width: 100%;
  }

  /* ---------- ARCHIVE ---------- */

  #archive-wrapper {
    grid-column: 1 / 3;
    grid-template-columns: 1fr 1fr;
  }

  #mobile-filter-toggle {
    grid-column: 1 / 3;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 1rem 0;
    border-top: 1px solid black;
    border-bottom: 1px solid black;
    margin-bottom: 20px;
    font-size: 1.25rem;
    font-family: 'Space Grotesk';
    line-height: 2rem;
    pointer-events: auto;
    width: 100%;
    cursor: pointer;
    position: relative;
    z-index: 2;
  }

  #mobile-filter-toggle * {
    pointer-events: none;
  }

  .clear-filters-btn.mobile-clear-btn.has-active {
    display: flex !important;
  }

  .clear-filters-btn.desktop-clear-btn {
    display: none !important;
  }

  .hamburger-icon {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 18px;
    height: 14px;
  }

  .hamburger-icon span {
    display: block;
    height: 2px;
    width: 100%;
    background-color: currentColor;
  }

  #filters-overlay {
    position: fixed;
    inset: 0;
    background-color: white;
    display: none;
    overflow-y: auto;
    pointer-events: none;
    /* padding: 2rem; */
    z-index: 1000;
  }

  #filters-overlay.overlay-open {
    display: grid;
    pointer-events: auto;
  }

  .filters-content {
    grid-column: 1 / 3;
    grid-template-columns: 1fr 1fr;
    height: fit-content;
    padding: 8rem 16px 0 16px;
    grid-row: 1;
    row-gap: 16px;
    width: auto;
  }

  .filters-content .sub-menu-item {
    grid-column: 1 / 3 !important;
  }

  #mobile-search-container {
    grid-column: 1 / 2;
    display: grid;
    grid-template: inherit;
    padding-right: 1rem;
  }

  #make-it-simple {
    grid-column: 1 / 3;
  }

  #apply-filters-btn {
    grid-column: 1 / 3;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: #c7c7c7;
    color: white;
    font-family: 'Space Grotesk';
    font-size: 1.25rem;
    padding: 1.05rem 0;
    height: fit-content;
  }

  #active-filters-counter {
    grid-column: 1 / 2;
    grid-row: 1;
    margin-top: 0;
    height: fit-content;
    padding: 16px;
  }

  #close-filters-overlay {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    grid-column: 2 / 3;
    grid-row: 1;
    justify-self: end;
    align-self: start;
    width: fit-content;
    height: fit-content;
    cursor: pointer;
    pointer-events: auto;
    z-index: 1001;
    padding: 16px;
  }

  #close-filters-overlay img {
    pointer-events: none;
    width: 24px;
    height: 24px;
  }

  .archive-grid {
    grid-column: 1 / 3;
    grid-template-columns: inherit;
    row-gap: 2rem;
  }

  .research-card {
    grid-column: 1 / 3 !important;
    height: 340px;
  }

  .card-title {
    -webkit-line-clamp: 2;
  }

  .card-media-wrapper img {
    height: 142.5px;
  }

  .card-footer {
    padding: 8px 0;
  }

  /* ---------- RESEARCH NODE PAGE ---------- */

  .research-node-page {
    display: grid;
    grid-column: 1 / 3;
    grid-template-columns: 1fr 1fr;
    margin-bottom: 20rem;
  }

  .card-type-badge {
    grid-column: 1 / 2;
  }

  .back-to-archive.right {
    grid-column: 2 / 3;
  }

  .node-details {
    display: none;
  }

  .mobile-author-contributor {
    display: block;
    grid-column: 1 / 3;
  }

  .detail {
    line-height: 1.3rem;
  }

  .node-photo-archive-wrapper {
    grid-column: 1 / 3;
    grid-template-columns: 1fr 1fr;
  }

  .node-photo-item:nth-child(2n+1),
  .node-photo-item:nth-child(2n),
  .node-url-wrapper,
  .node-text,
  .node-title {
    grid-column: 1 / 3;
  }

  .embedded-url {
    height: 200px;
    margin-bottom: 1.5rem;
  }

  .node-topis {
    margin: 1.75rem 0;
  }

  .audio-title {
    -webkit-line-clamp: 5;
  }

  .lightbox-prev img,
  .lightbox-next img {
    width: 32px;
    height: 32px;
  }

  .lightbox-prev {
    left: 0;
  }

  .lightbox-next,
  .lightbox-close {
    right: 0;
  }

  #lightbox-caption {
    padding: 16px 32px;
  }

  .substack-content-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    margin-top: 2rem;
  }

  .substack-signup-text {
    grid-column: 1 / 3 !important;
    padding-left: 0;
  }

  .substack-signup {
    border: 0;
    background: transparent;
    grid-column: 1 / 3;
    margin-top: -1rem;
    margin-left: -0.8rem;
  }

  .error-page-wrapper {
    padding: 0 2rem;
  }

  .terms-wrapper {
    margin-bottom: 20rem;
  }

  .terms-desktop {
    display: none;
  }

  .terms-mobile {
    display: block;
    margin-top: 26px;
  }

  .terms-mobile>a {
    font-size: 1rem;
    color: #474747;
  }

}

@media (max-width:700px) {

  .logo-container:nth-child(7n of .logo-container),
  .logo-container:nth-child(7n+1 of .logo-container),
  .logo-container:nth-child(7n+2 of .logo-container),
  .logo-container:nth-child(7n+3 of .logo-container),
  .logo-container:nth-child(7n+4 of .logo-container),
  .logo-container:nth-child(7n+5 of .logo-container),
  .logo-container:nth-child(7n+6 of .logo-container) {
    grid-column: 1 / 3;
    grid-template-columns: 1fr 1fr;
    row-gap: 1rem;
  }

  .logo-container:nth-child(7n+1 of .logo-container)>div:nth-child(4n+1),
  .logo-container:nth-child(7n+3 of .logo-container)>div:nth-child(4n+1),
  .logo-container:nth-child(7n+4 of .logo-container)>div:nth-child(4n+1),
  .logo-container:nth-child(7n+5 of .logo-container)>div:nth-child(4n+1),
  .logo-container:nth-child(7n+6 of .logo-container)>div:nth-child(4n+1) {
    grid-column: 1 / 2;
  }

  .logo-container:nth-child(7n+1 of .logo-container)>div:nth-child(4n+2),
  .logo-container:nth-child(7n+3 of .logo-container)>div:nth-child(4n+2),
  .logo-container:nth-child(7n+4 of .logo-container)>div:nth-child(4n+2),
  .logo-container:nth-child(7n+5 of .logo-container)>div:nth-child(4n+2),
  .logo-container:nth-child(7n+6 of .logo-container)>div:nth-child(4n+2) {
    grid-column: 2 / 3;
  }

  .logo-container:nth-child(7n+1 of .logo-container)>div:nth-child(4n+3),
  .logo-container:nth-child(7n+3 of .logo-container)>div:nth-child(4n+3),
  .logo-container:nth-child(7n+4 of .logo-container)>div:nth-child(4n+3),
  .logo-container:nth-child(7n+5 of .logo-container)>div:nth-child(4n+3),
  .logo-container:nth-child(7n+6 of .logo-container)>div:nth-child(4n+3) {
    grid-column: 1 / 2;
  }

  .logo-container:nth-child(7n+1 of .logo-container)>div:nth-child(4n),
  .logo-container:nth-child(7n+3 of .logo-container)>div:nth-child(4n),
  .logo-container:nth-child(7n+4 of .logo-container)>div:nth-child(4n),
  .logo-container:nth-child(7n+5 of .logo-container)>div:nth-child(4n),
  .logo-container:nth-child(7n+6 of .logo-container)>div:nth-child(4n) {
    grid-column: 2 / 3;
  }

  .logo-container:nth-child(7n+2 of .logo-container)>div:nth-child(4n+1),
  .logo-container:nth-child(7n of .logo-container)>div:nth-child(4n+1) {
    grid-column: 1 / 2;
  }

  .logo-container:nth-child(7n+2 of .logo-container)>div:nth-child(4n+2),
  .logo-container:nth-child(7n of .logo-container)>div:nth-child(4n+2) {
    grid-column: 2 / 3;
  }

  .logo-container:nth-child(7n+2 of .logo-container)>div:nth-child(4n+3),
  .logo-container:nth-child(7n of .logo-container)>div:nth-child(4n+3) {
    grid-column: 1 / 2;
  }

  .logo-container:nth-child(7n+2 of .logo-container)>div:nth-child(4n),
  .logo-container:nth-child(7n of .logo-container)>div:nth-child(4n) {
    grid-column: 2 / 3;
  }

  .partners-logo-3,
  .partners-logo-4,
  .partners-logo-5,
  .partners-logo-6,
  .partners-logo-7,
  .funders-logo-2 {
    margin-top: 1rem;
  }
}

@media (max-width:640px) {
  .title {
    font-size: 1.5rem;
  }

  .diagonal-text {
    max-width: 35%;
  }
}

@media (max-width: 495px) {



  .diagonal-text {
    font-size: 1.5rem;
  }

  #ticker-detail-left {
    font-size: 1.25rem;
  }

  #ticker-detail-right {
    font-size: 1rem;
  }

  #learn-more {
    font-size: 1.25rem;
  }

  .indicator {
    width: 10px;
    height: 10px;
  }

}

@media (max-width: 400px) {
  #marginal-logo {
    width: 10rem;
  }

  .mobile-title-1 {
    grid-column: 1/3;
    grid-row: 1;
    display: block;
  }

  #close-filters-overlay img {
    width: 1.8rem;
  }
}