@charset "utf-8";

.department-intro {
  margin-bottom: 4rem !important;

  & .block--container {
    padding-bottom: 5rem;
  }

  & .button--row {
    align-items: stretch;
    margin: -4rem 0;
    max-width: var(--max-width);
    padding: 0 2rem;
    width: 100%;
    z-index: 1;
  }
}

.department-intro .button--row .button--complete {
  --size: 6rem;
  align-items: center;
  margin: 1rem;
  width: calc(100% / 6);
}

@media screen and (max-width: 1000px) {
  .department-intro .button--row {
    bottom: -7rem;
  }

  .department-intro .button--row .button--complete .brand-button {
    --size: 6rem;
  }
}

@media screen and (max-width: 900px) {
  .department-intro .button--row {
    margin: -3rem;
  }

  .department-intro .button--row .button--complete .brand-button {
    --size: 4rem;
  }
}

@media screen and (max-width: 700px) {
  .department-intro {
    margin-bottom: 0 !important;

    & .button--row {
      bottom: unset;
      flex-wrap: wrap;
      margin: -3rem 0 2rem;
    }
  }

  .department-intro .button--row .button--complete {
    margin: .5rem;
    width: calc(100% / 3 - 1rem);

    & .label {
      font-size: 13px;
      line-height: 1.2;
    }
  }
}

@media screen and (max-width: 600px) {
  .department-intro .button--row {
    margin: 0;
    padding: 0;
  }

  .department-intro .button--row .button--complete {
    margin: .25rem;
    width: calc(100% / 3 - .5rem);
  }

  .department-intro .brand-button {
    --size: 3rem;
    background: none;

    & img {
      display: none;
    }

    & .button--push {
      align-items: center;
      border: 1px solid var(--contrast);
      box-shadow: none;
      justify-content: center;
    }
  }

  .department-intro .button--push::after {
    background: var(--color-6);
    border-radius: var(--circle);
    content: "";
    height: calc(var(--size) / 2);
    width: calc(var(--size) / 2);
  }
}