@media (min-width: 768px) {

  .grid-2 {
    grid-template-columns: repeat(2, 1fr);
  }

  .grid-3 {
    grid-template-columns: repeat(3, 1fr);
  }

  .simulator-layout {
    grid-template-columns: 1fr 1fr;
  }

}

@media (max-width: 767px) {

  .container {
    width: min(100% - 34px, var(--container-width));
  }

  .section {
    padding-top: var(--space-5);
    padding-bottom: var(--space-5);
  }

  .hero {
    min-height: 100svh;

    padding-top: 135px;
    padding-bottom: 70px;
  }

  .hero-logo {
    width: 84px;

    top: 18px;
  }

  .hero-title {
    font-size: 48px;
  }

  .hero-description {
    font-size: var(--font-size-md);
  }

  .section-title {
    max-width: 340px;

    margin-left: auto;
    margin-right: auto;

    font-size: 40px;
  }

  .section-description {
    font-size: var(--font-size-md);
  }

  .grid,
  .grid-2,
  .grid-3,
  #products-container .grid,
  #addons-container .grid,
  #categories-container.grid {
    grid-template-columns: 1fr !important;
  }

  .card,
  .simulator-card,
  .final-summary-card,
  .payment-result {
    border-radius: 24px;

    padding: var(--space-3);
  }

  .card-footer {
    margin-top: var(--space-2);
  }

  .selected-addon-row {
    flex-direction: column;
  }

  .selected-addon-actions {
    align-items: flex-start;
  }

  .payment-value {
    font-size: 38px;
  }

  .comparison-table,
  table {
    font-size: var(--font-size-sm);
  }

  .comparison-table th,
  .comparison-table td,
  table th,
  table td {
    padding: 11px 8px;
  }

  .faq-tabs-wrapper {
    margin-left: -17px;
    margin-right: -17px;
  }

  .faq-tabs {
    padding-left: 17px;
    padding-right: 17px;
  }

}

/* ==================================================
   FIX LOGO HERO
   ================================================== */

.hero {
  position: relative !important;

  min-height: 100svh !important;

  padding-top: 170px !important;
}

.hero-logo {
  position: absolute !important;

  top: 22px !important;
  left: 50% !important;

  width: 96px !important;

  transform: translateX(-50%) !important;

  margin: 0 !important;
}

@media (min-width: 768px) {

  .hero {
    padding-top: 160px !important;
  }

  .hero-logo {
    width: 112px !important;

    top: 24px !important;
  }

}