@media screen and (max-width: 1023px) {
  /* typography */

  .h1,
  h1 {
    font-size: 24px;
    line-height: 135%;
  }

  .h3,
  a,
  p {
    font-size: 16px;
    line-height: 125%;
  }

  .caption,
  .page-navigation a {
    font-size: 13px;
    line-height: 125%;
  }

  h2,
  .h2 {
    font-size: 24px;
    line-height: 135%;
  }

  .card-copy .h3,
  .header-navigation a,
  .body-large p,
  h3,
  .about-item p,
  .image-block-title .h3,
  .h3 p,
  .h3 a,
  .venue-body p {
    font-size: 18px;
    line-height: 135%;
  }

  .venue-body p:not(:last-child) {
    margin-bottom: 24px;
  }

  /* grid */

  .grid {
    grid-template-columns: repeat(8, 1fr);
    grid-auto-flow: dense;
  }

  .section-margin {
    margin-inline: 20px;
  }

  section {
    margin-bottom: 40px;
  }

  .small-margin {
    margin-bottom: 20px;
  }

  .medium-margin {
    margin-bottom: 40px;
  }

  .hero {
    grid-column: span 8;
  }

  .reveal {
    opacity: 1;
    transform: translateY(0);
  }

  /* Navigation */

  header,
  .header {
    padding-inline: 20px;
  }

  .page-navigation-wrapper {
    height: 48px;
    z-index: 2;
  }

  .page-navigation-wrapper ~ section {
    scroll-margin-top: 310px;
  }

  header figure svg {
    width: 140px;
  }

  .desktop {
    display: none;
  }

  #mobileNavBtn {
    display: flex;
    z-index: 1;
    cursor: pointer;
  }

  header > a {
    z-index: 1;
  }

  .mobile-navigation-container {
    width: 100vw;
    height: calc(100vh - 75px);
    position: absolute;
    top: 75px;
    bottom: 0;
    left: 0;
    display: block;
    padding-inline: 20px;
    background-color: var(--white);
    opacity: 0;
    visibility: hidden;
    transition: all 200ms ease-in;
    z-index: 3;
  }

  .mobile-navigation-toggle-container {
    display: flex;
    -moz-column-gap: 12px;
    column-gap: 12px;
    align-items: center;
  }

  .mobile-navigation-container.open {
    opacity: 1;
    visibility: visible;
  }

  .mobile-navigation {
    position: relative;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
  }

  .mobile-navigation nav {
    width: 100%;
    margin-top: 40px;
    display: flex;
    flex-direction: column;
  }

  .mobile-navigation .primary-button {
    margin-bottom: 40px;
  }

  .nav-submenu {
    display: none;
  }

  /* Loading Anmiation */

  .loader-container figure {
    width: 66%;
  }

  /* Image Block Styles */

  .image-block.image-right figure,
  .image-block.image-left figure,
  .image-block.image-left.landscape figure,
  .image-block.image-right.landscape figure {
    grid-column: 1 / span 8;
    margin-bottom: 20px;
  }

  .image-block {
    padding: 20px;
  }

  .image-block .image-block-title {
    width: 62.5%;
    margin-bottom: 80px;
  }

  .image-block.image-right .image-block-text,
  .image-block.image-left .image-block-text,
  .image-block.image-left.landscape .image-block-text,
  .image-block.image-right.landscape .image-block-text {
    grid-column: 1 / span 8;
  }

  .image-block figure {
    height: auto;
    aspect-ratio: 3/4;
  }

  footer {
    margin-top: 80px;
  }

  footer .grid nav {
    grid-column: span 6;
  }

  footer .grid nav:not(:last-child) {
    margin-bottom: 40px;
  }

  /* carousel */

  .venue-carousel {
    padding-inline: 20px;
  }

  .venue-swiper .swiper-slide {
    width: 75%;
  }

  .mobile-events {
    display: grid;
    padding-inline: 20px;
    overflow: hidden;
  }

  .event-card:first-child {
    grid-column: span 8;
  }
  .event-card {
    grid-column: span 4;
  }

  .card {
    grid-column: span 6;
  }

  .event-grid-btn {
    display: none;
  }
  .swiper-container {
    height: 40vw;
    padding-inline: 20px;
  }

  .mobile-swiper {
    grid-column: span 8;
  }

  .mobile-swiper .swiper-slide figure {
    aspect-ratio: 1/1;
  }

  .current-vacancies .venue-swiper {
    display: block;
  }

  /* event page */

  .event-image-wrapper,
  .event-details {
    grid-column: 1 / span 8;
  }

  .event-details {
    margin-bottom: 40px;
  }

  .event-page {
    margin-bottom: 120px;
  }

  /* page head */

  .page-navigation-wrapper + section {
    padding-top: 88px;
  }

  .page-head-image figure {
    aspect-ratio: auto;
    height: calc(100vw - 40px);
    grid-column: span 8;
    max-height: 600px;
  }

  .page-head {
    margin-top: 40px;
  }

  .page-head .medium-margin:first-child {
    margin-bottom: 20px;
  }

  /* accordian */

  .accordian-title,
  .accordian-content {
    grid-column: span 8;
  }

  .accordian-content {
    margin-top: 40px;
  }

  .accordian-content details {
    padding: 15px 0;
  }

  summary > *::after {
    scale: 0.75;
  }

  .accordian_inner {
    margin-bottom: 16px;
  }

  /* careers */

  .text-body {
    width: 100%;
  }

  .filter a:not(:last-of-type) {
    margin-right: 20px;
  }

  .filter a {
    margin-right: 0px;
  }

  .careers-hero p,
  .team-hero p {
    max-width: 100%;
  }

  .current-vacancies .card {
    display: none;
  }

  .current-vacancies .mobile-swiper .swiper-slide figure {
    aspect-ratio: 3/2;
  }

  .careers-hero {
    grid-column: span 8;
  }

  .team-hero.small-margin {
    margin-bottom: 0px;
  }

  .current-vacancies {
    overflow: hidden;
    padding-inline: 20px;
  }
  .career-story-item {
    grid-auto-flow: dense;
    height: 100%;
  }
  .career-story-item figure {
    grid-row: 1 / span 8;
  }

  .career-stories-swiper {
    overflow: hidden;
  }

  .section-margin .accordian-wrapper {
    margin-bottom: 80px;
  }

  /* venues page */

  .body-medium p {
    grid-column: span 8;
  }

  .venue-card {
    grid-column: span 8;
  }

  .venues-grid {
    row-gap: 40px;
  }

  .venues-grid.large-margin {
    margin-bottom: 80px;
  }

  /* venue page */

  .venue-body,
  .venue-details {
    grid-column: span 8;
  }

  .venue-details {
    margin-bottom: 80px;
  }

  .venue-details .small-margin {
    margin-bottom: 40px;
  }

  .carousel-controls {
    margin-inline: 20px;
  }

  .carousel-buttons {
    display: none;
  }

  /* whats on */

  .event-grid {
    row-gap: 40px;
  }

  .filter a {
    display: inline-block;
    margin-bottom: 8px;
  }

  /* about page */

  .about-title,
  .about-body,
  .about-item,
  .body-content figure,
  .team-hero,
  .vacancies-grid .card {
    grid-column: span 8;
  }

  .about-item,
  .vacancies-grid {
    margin-bottom: 80px;
  }

  .grid.about-item {
    row-gap: 20px;
  }

  /* landing popup */

  .landing-inner {
    width: 80vw;
    padding: 40px 20px;
  }

  .landing-inner .h3,
  .landing-inner .primary-button {
    margin-top: 40px;
  }

  .landing-inner figure {
    width: 50vw;
    max-width: 350px;
  }
  .gift-card {
    min-height: unset;
  }
  .gift-card figure {
    grid-column: 1 / -1;
  }

  .gift-card .body {
    grid-column: 1 / -1;
    margin-top: 24px;
    padding-inline: 16px;
  }

  .gift-card-form {
    height: 85vh;
  }

  .cart {
    width: 100vw;
  }
}