@media (max-width: 480px) {
  .hero {
    padding: 20px 20px;
  }

  .hero-logo {
    max-width: 768px;
    margin-bottom: 20px;
  }

  .hero-content {
    max-width: 480px;

    flex-direction: column;
  }

  .hero-content-left {
    padding: 20px 20px;
  }

  .hero-title {
    font-size: var(--fs-xl);
  }

  .hero-image-container {
    width: 390px;
    height: 384px;
  }

  /*read*/
  .read {
    padding: 20px 20px;
  }

  .read-content {
    max-width: 480px;
    flex-direction: column;
  }

  .read-image-container {
    width: 390px;
    height: 384px;
  }

  .read-content-right {
    gap: 34px;
    width: 390px;
  }

  .read-title {
    font-size: var(--fs-xl);
  }

  .read-list {
    width: 328px;
  }

  /*club*/
  .club {
    padding: 20px 20px;
  }

  .club-content {
    max-width: 480px;
    flex-direction: column;
  }

  .club-content-left {
    align-items: center;
  }

  .club-title {
    font-size: var(--fs-xl);
    width: 343px;
  }

  .club-description {
    width: 343px;
  }

  .club-image-container {
    width: 390px;
    height: 384px;
  }

  .club-tech-logos {
    display: none;
  }

  /*journey*/

  .journey {
    padding: 20px 20px;
  }

  .journey-content {
    max-width: 480px;
    padding: 20px 20px;
    gap: 40px;
    min-width: 340px;
  }
  .journey-steps {
    align-items: flex-start;
    justify-content: flex-start;
    flex-direction: column;
    gap: 20px;
  }

  .journey-step-container {
    max-width: 330px;
  }

  .journey-step-image {
    display: none;
  }

  .journey-title {
    text-align: left;
  }

  /*membership*/

  .membership {
    padding: 20px 20px;
  }

  .membership-content {
    padding: 20px 20px;
    gap: 40px;
  }

  .membership-title {
    text-align: left;
  }

  .membership-options-group {
    flex-direction: column;
  }

  .enterprise {
    width: 100%;
  }

  /*architect*/
  .architect {
    padding: 20px 20px;
  }

  .architect-content {
    padding: 20px 20px;
    gap: 40px;
    align-items: flex-start;
  }

  .architect-description {
    max-width: 343px;
    text-align: left;
    font-size: var(--fs-md);
    padding: 0px 0px;
  }

  .footer {
    padding: 20px 20px;
  }

  .footer-content {
    max-width: 480px;
  }

  .footer-title {
    max-width: 343px;
    font-size: var(--fs-lg);
    text-align: center;
  }
  .footer-btn {
    --fs-xxs: 14px;
  }

  .footer-info-container {
    max-width: 343px;
  }

  .footer-divider {
    margin: 16px 0;
  }

  .footer-copyright {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 20px;
  }
}