@use "@sass-palette/hope-config";

.vp-project-home {
  // adjust action button size
  .vp-action {
    padding: 0.5rem 1.25rem;
    font-size: 1.25rem;

    @media (max-width: hope-config.$tablet) {
      padding: 0.5rem 1rem;
      font-size: 1rem;
    }
  }

  // adjust icon size
  .vp-feature-title {
    text-align: center;
    margin-bottom: 0;

    .vp-icon {
      display: block;
      width: 2.5rem;
      height: 2.5rem;
      margin: 0 auto 1rem;
    }
  }

  // adjust feature breakpoint
  .vp-feature-item {
    flex-basis: calc(20% - 2rem);
    padding: 0.5rem;

    @media (max-width: hope-config.$laptop) {
      flex-basis: calc(25% - 2rem);
      padding: 0.5rem;
    }

    @media (max-width: hope-config.$tablet) {
      flex-basis: calc(33.333% - 2rem);
      padding: 0.5rem;
    }

    @media (max-width: hope-config.$mobile) {
      flex-basis: calc(50% - 2rem);
      padding: 0.5rem;
    }

    @media (min-width: hope-config.$pc) {
      flex-basis: calc(16.666% - 2rem);
      padding: 0.5rem;
    }
  }

  // adjust homepage content
  .theme-hope-content {
    margin-top: 1rem;
  }
}
