@import '_variables';
@import '_mixins';

.home {
  // max-width: var(--homepage-width);
  padding: var(--navbar-height) 2rem 0;
  margin: 0 auto;
  display: block;
  min-height: calc(100vh - var(--navbar-height) - var(--footer-height) - 2rem);
  &:not(:first-child) {
    padding: 0;
    margin-top: var(--navbar-height);
  }

  .home-bg {
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
    height: 25rem;
  }

  .home-center {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    width: 100%;
    padding-top: 1.5rem;
    min-height: calc(100vh - var(--navbar-height) - var(--footer-height) - 5rem);
  }

  .features {
    border-top: 1px solid var(--c-border);
    transition: border-color var(--t-color);
    padding: 1.2rem 0;
    margin-top: 2.5rem;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    align-content: stretch;
    justify-content: space-between;
  }

  .feature {
    flex-grow: 1;
    flex-basis: 30%;
    max-width: 30%;

    h2 {
      font-size: 1.4rem;
      font-weight: 500;
      border-bottom: none;
      padding-bottom: 0;
      color: var(--c-text-light);
    }

    p {
      color: var(--c-text-lighter);
    }
  }

  .theme-default-content {
    padding: 0;
    margin: 0;
  }
}

@media (max-width: $MQMobile) {
  .home {
    .features {
      flex-direction: column;
    }

    .feature {
      max-width: 100%;
      padding: 0 2.5rem;
    }
  }
}

@media (max-width: $MQMobileNarrow) {
  .home {
    padding-left: 1.5rem;
    padding-right: 1.5rem;

    .hero {
      img {
        max-height: 210px;
        margin: 2rem auto 1.2rem;
      }

      h1 {
        font-size: 2rem;
      }

      h1,
      .description,
      .actions {
        margin: 1.2rem auto;
      }

      .description {
        font-size: 1.2rem;
      }

      .action-button {
        font-size: 1rem;
        padding: 0.6rem 1.2rem;
      }
    }

    .feature {
      h2 {
        font-size: 1.25rem;
      }
    }
  }
}