body.home {

  footer {
    .copyright {
      margin-top: 1rem;
    }
  }
}

.hero-section {
  margin-block-start: 75px;
  background-color: transparent;
}

.hero-section ~ main {
  margin-top: 0;
}

/* grid definition */
.hero {
  display: grid;
  grid-template-rows: auto;
  grid-template-columns: 1fr 280px;
  max-width: var(--grid-max-width);
  gap: 2rem;

  margin-inline: auto;
  margin-block-end: 1rem;
  padding: 3rem 2rem 0 2rem;

  .title { grid-column: 1 / 1; grid-row: 1 / 1; }
  .actions { grid-column: 2 / 2; grid-row: 1 / 1; }
  .sub-title { grid-column: 1 / 1; grid-row: 2 / 2; }
  .stats { grid-column: 2 / 2; grid-row: 2 / 2; }
}


/* styling of hero content */
.hero {

  .accent {
    color: oklch(55.191% 0.10311 167.678);
    font-style: normal;
  }

  .title {
    margin-block: 0;
    font-size: 2.5rem;
    align-self: center;
  }

  .sub-title {
    margin: 0;
    font-size: 1.5rem;
    font-weight: normal;
  }


  .actions {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    justify-content: center;
    align-items: end;

    .button {
      padding: 1rem;
      font-size: 1.33rem;
      font-weight: 600;
      line-height: 1.4;
      width: 100%;
      max-width: 280px; 
      text-align: center;
      background-color: oklch(55.191% 0.10311 167.678);
      border-color: oklch(55.191% 0.10311 167.678);
      color: #fff;

      * {
        margin: 0;
        line-height: 1.4;
      }

      span {
        font-weight: normal;
      }
    }

    .button:hover {
      background-color: oklch(62.558% 0.11719 167.944);
      border-color: oklch(62.558% 0.11719 167.944);
    }

  }

  .stats {
    width: 280px;
    text-align: center;

    .em {
      font-weight: bold;
      font-size: 1.1rem;
      color: oklch(55.191% 0.10311 167.678);
    }
  }
}


.logos {
  margin-block: 2rem 3rem;

  .see-all {
    margin-top: 2rem;
    text-align: right;
  }
}

.facets {
  display: flex;
  justify-content: space-between;
  gap: 1rem 2rem;

  .facet {
    width: 100%;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-2);
    background-color: var(--surface-1);
    padding: 2rem;

    *:first-child {
      margin-block-start: 0;
    }
  }
}

@media(max-width: 768px) {

  .hero {
    display: grid;
    grid-template-columns: auto;
    gap: 2rem;

    /* margin-inline: auto;
    margin-block-end: 1rem;
    padding: 3rem 2rem 0 2rem; */

    .title { grid-column: 1 / 1; grid-row: 1 / 1; }
    .actions { grid-column: 1 / 1; grid-row: 3 / 3; }
    .sub-title { grid-column: 1 / 1; grid-row: 2 / 2; }
    .stats { grid-column: 1 / 1; grid-row: 4 / 4; }

    .title,
    .actions,
    .sub-title,
    .stats { 
      width: 100%;
      text-align: center;
    }

    .actions {
      flex-direction: row;
    }
  }

  .facets {
    flex-direction: column;

    .facet { width: 100%; }
  }

.logos {
  .see-all {
    text-align: center;
  }
}


}

@media(max-width: 480px) {

  .hero {

    .actions {
      flex-direction: column;
      justify-content: space-between;
      align-items: center;

      .button { width: 100%; }
    }
  }

}