/* @media (1024px <= width < 1440px) {
  html {
    font-size: 13px;
  }
}

@media (768px <= width < 1024px) {
  html {
    font-size: 10px;
  }
}

@media (426px <= width < 768px) {
  html {
    font-size: 6px;
  }
  
  .subscription-section .subtitle {
    font-size: 1.7rem;
  }
} */

@media (width < 640px) {
  .subscription-section {
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin: 30px 8% 0 8%;
    padding: 0;
  }

  .subscription-section h1 {
    font-size: 30px;
    width: 100%;
    text-align: center;
  }
  
  .subscription-section .subtitle {
    font-size: calc(0.2vw + 16px);
    margin-bottom: unset;
  }

  .card {
    width: 50vw;
    height: 80vw;
    min-height: unset;
  }

  .card h2 {
    font-size: calc(5vw + 8px);
  }

  .card .cost p {
    font-size: calc(3vw + 10px);
  }

  .card .cost-year p {
    font-size: 2.5rem;
  }

  .cost-year .discount {
    width: 4rem;
    height: 4rem;
    top: -2rem;
    right: -2rem;
    font-size: 2rem;
  }

  .card.left {
    left: 45%;
  }
  .card.right {
    left: 55%;
  }

  .card.active {
    transform: translate(-50%, -50%) scale(0.85);
  }

  .carousel-container {
    height: 80vw;
    gap: 2vw;
    margin-top: 10px;
    width: 100%;
  }

  .arrow-button {
    display: flex;
    justify-content: center;
    align-items: center;
    width: calc(20px + 3vw);
    height: calc(20px + 3vw);
    background: var(--text-color);
    border-radius: 100%;
    border: none;
    cursor: pointer;
    z-index: 5;
  }

  .cards-wrapper {
    width: auto;
    position: unset;
  }

  .subscribe-button {
    font-size: calc(2.5vw + 4px);
    padding: 1rem 0.5rem;
    font-weight: 300;
  }

  .arrow-button img {
    width: 1rem;
  }
}