/* PC SIZE */
@media only screen and (max-width: 1144px) {
   /* GENERAL */
   :root {
      --h1-size: 85px;
      --h1-line-height: 95px;
   }

   .section-container {
      padding: 0 var(--spacing-md);
   }

   /* HERO SECTION */
   .hero .hero-phone {
      height: 600px;
   }

   .hero .column-left {
      width: 60%;
   }

   .hero .column-right {
      width: 40%;
   }

   /* INTEGRATION SECTION */
   .integration-section {
      padding: var(--spacing-xl) 0;
   }

   /* WHY SWIPE SECTION */
   .why-swipe-section {
      padding: calc(var(--spacing-xl) * 2) 0;
   }
}

@media only screen and (max-width: 870px) {
   /* GENERAL */
   :root {
      --h1-size: 70px;
      --h1-line-height: 80px;
   }

   /* HERO SECTION */
   .hero .hero-phone {
      height: 500px;
      transform: translateY(-64px);
   }

   /* PARTNERS SECTION */
   .partners-grid {
      margin: var(--spacing-sm) 0;
   }

   .partners-grid img {
      width: 100%;
      height: auto;
   }

   /* INTEGRATION SECTION */
   .integration-section .column-left {
      width: 60%;
   }

   .integration-section .column-right {
      width: 40%;
   }

   /* GLOBAL SECTION */
   .global-section {
      padding: var(--spacing-xl) 0;
   }

   /* VIRTUAL EVENTS SECTION */
   .virtual-events-section {
      padding: var(--spacing-xl) 0;
   }
}

/* TABLET SIZE */
@media only screen and (max-width: 768px) {
   /* GENERAL */
   :root {
      --h1-size: 50px;
      --h2-size: 42px;
      --h3-size: 34px;
      --h4-size: 24px;
      --h5-size: 20px;
      --h6-size: 16px;
      --h1-line-height: 60px;
      --h2-line-height: 42px;
   }

   /* NAVBAR */
   .navbar .menu, .navbar .navbar-button {
      display: none;
   }

   .navbar .hamburger-button {
      display: flex;
   }

   /* HERO SECTION */
   main {
      margin: 0;
   }

   #gradient-canvas {
      height: 900px;
   }

   .hero .two-column {
      align-items: center;
   }

   .hero .hero-phone {
      height: 450px;
      transform: translateX(32px);
   }

   /* UNIFIED PLATFORM SECTION*/
   .unified-platform-section h2 {
      width: 100%;
   }

   /* INTEGRATION SECTION */
   .integration-section .card-container {
      flex-direction: column;
   }

   .integration-section .card-container .card {
      width: 100%;
   }

   /* WHY SWIPE SECTION */
   .why-swipe-section {
      padding: var(--spacing-xl) 0;
   }

   .why-swipe-section .card-container {
      flex-wrap: wrap;
   }

   .why-swipe-section .card-container .card {
      width: 50%;
      margin: var(--spacing-md) 0;
   }

   /* GLOBAL SECTION */
   .global-section .card-container {
      flex-wrap: wrap;
      margin: var(--spacing-xl) 0;
   }

   .global-section .card-container .card {
      width: 50%;
      margin: var(--spacing-md) 0;
   }

   /* VIRTUAL EVENTS SECTION */
   .virtual-events-section {
      padding: var(--spacing-lg) 0;
   }

   .virtual-events-section .swipe-sessions-card #sessions-logo{
      width: 75%;
   }

   /* GETTING STARTED SECTION */
   .getting-started-section .two-column {
      align-items: center;
   }

   .getting-started-section .column-right {
      flex-wrap: wrap;
   }

   .getting-started-section .column-right .icon {
      height: 40px;
   }

   .getting-started-section .column-right .card {
      width: 100%;
      margin: var(--spacing-lg) 0;
   }
}

/* MOBILE SIZE */
@media only screen and (max-width: 550px) {
   /* GENERAL */
   .two-column {
      flex-direction: column;
   }

   .two-column .column-left {
      width: 100%;
   }

   .two-column .column-right {
      width: 100%;
      padding: 0;
   }

   /* NAVBAR */
   .nav {
      margin: 0 0 var(--spacing-lg) 0;
   }

   /* HERO */
   #gradient-canvas {
      height: 800px;
   }

   .hero .hero-phone-container {
      display: none;
   }

   /* PARTNERS SECTION */
   .partners-grid {
      margin: var(--spacing-xl) 0 0 0;
      grid-template-columns: 1fr 1fr;
   }

   /* INTEGRATION SECTION */
   .integration-section .column-right {
      display: none;
   }

   /* WHY SWIPE SECTION */
   .why-swipe-section .card-container .card {
      width: 100%;
   }

   .why-swipe-section .card-container .card .icon {
      height: 40px;
   }

   /* GLOBAL SECTION */
   .global-section {
      padding: var(--spacing-md) 0;
   }
      
   .global-section .two-column #globe {
      opacity: 10%;
   }

   .global-section .card-container .card {
      width: 100%;
      margin: var(--spacing-sm) 0;
   }

   /* VIRTUAL EVENTS SECTION */
   .virtual-events-section .swipe-sessions-card {
      width: 100%;
      height: 350px;
      margin: var(--spacing-lg) 0;
   }

   .virtual-events-section .swipe-sessions-card .secondary-text {
      width: 100%;
   }
   
   .virtual-events-section .avatars {
      left: var(--spacing-md);
   }

   .virtual-events-section .card-bottom {
      padding: var(--spacing-xl) 0 0 var(--spacing-md);
   }

   /* FOOTER */
   .footer .section-container {
      flex-wrap: wrap;
   }

   .footer #footer-logo {
      width: 80px;
   }

   .footer .icon-link img {
      width: 18px;
   }

   .footer .col {
      width: 50%;
      margin: var(--spacing-md) 0;
   }

   .footer .col a {
      font-size: 12px;
   }
}