Business Card: Office

.business_card {
  margin: $space_two 0 0 0;
  background-color: $accent_color;
  background-color: var(--accent_color, $accent_color);
  color: $grey_darkest;
  border: 3px solid $white;
  border: 3px solid var(--white, $white);
  padding: $space_and_half;
  -moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
  -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);

  @include media-breakpoint-up(md) {
    margin: $space_three 0 0 0;
    width: 100%;
    max-width: 400px;
  }

  h2 {
    font-size: 1.5rem;
    text-align: center;
    margin: 0 0 $spacer 0;
    color: $grey_darkest;
    color: var(--grey_darkest, $grey_darkest);
  }

  h3 {
    font-size: 1.2rem;
    margin: 0 0 $space_one_half 0;
    color: $grey_darkest;
    color: var(--grey_darkest, $grey_darkest);
  }

  .contact_info {
    margin: 0;
    padding: 0;
    list-style: none;

    .contact_item {
      display: flex;
      flex-direction: row;
      flex-wrap: nowrap;
      align-items: center;
      margin: 0 0 $space_one_half 0;
      word-break: break-all;

      &:last-of-type {
        margin: 0;
      }

      .fas {
        margin: 0 $space_one_quarter 0 0;
      }

      a {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: flex-end;
        color: $grey_darkest;
        text-decoration: none;
        font-weight: normal;
        border: 0;

        &:hover,
        &:focus {
          text-decoration: underline;
        }
      }

      i {
        margin: 0 $space_one_half 0 0;
      }
    }
  }

  .accent-lehigh_brown &,
  .accent-blue_k60 & {
    color: $white;
    color: var(--white, $white);

    h2,
    h3 {
      color: $white;
      color: var(--white, $white);
    }

    .contact_info {
      .contact_item {
        a {
          color: $white;
          color: var(--white, $white);
        }
      }
    }
  }

  .business_card-content {
    margin: $space_one_half 0 0 0;

    p {
      margin: 0;
    }
  }

  .contact_info {
    margin: $space_one_half 0;
  }
}

.office-card {
  text-align: center;
  color: $grey_darkest;
  color: var(--grey_darkest, $grey_darkest);
  background-color: $off_white;
  background-color: var(--off_white, $off_white);
  padding: $spacer $space_two;
  width: 300px;
  min-height: 150px;
  border-top: 5px solid $accent_color;
  border-top: 5px solid var(--accent_color, $accent_color);
  margin: 0 $spacer $space_two $spacer;
  -webkit-box-shadow: 0 5px 15px $drop_shadow;
  -moz-box-shadow: 0 5px 15px $drop_shadow;
  box-shadow: 0 5px 15px $drop_shadow;
  -webkit-transition: all 0.2s;
  -moz-transition: all 0.2s;
  -ms-transition: all 0.2s;
  -o-transition: all 0.2s;
  transition: all 0.2s;

  .color-scheme-dark & {
    background-color: $dark_mode_grey;
    background-color: var(--dark_mode_grey, $dark_mode_grey);
    color: $white;
    color: var(--white, $white);
    -webkit-box-shadow: 0 5px 15px $drop_shadow_darkmode;
    -moz-box-shadow: 0 5px 15px $drop_shadow_darkmode;
    box-shadow: 0 5px 15px $drop_shadow_darkmode;
  }

  &:hover,
  &:focus-within {
    -webkit-box-shadow: 0 0 10px $drop_shadow;
    -moz-box-shadow: 0 0 10px $drop_shadow;
    box-shadow: 0 0 10px $drop_shadow;

    .color-scheme-dark & {
      -webkit-box-shadow: 0 0 10px $drop_shadow_darkmode;
      -moz-box-shadow: 0 0 10px $drop_shadow_darkmode;
      box-shadow: 0 0 10px $drop_shadow_darkmode;
    }
  }

  .office-card_link {
    color: $grey_darkest;
    color: var(--grey_darkest, $grey_darkest);

    h3 {
      font-size: 1.5rem;
      color: $grey_darkest;
      color: var(--grey_darkest, $grey_darkest);

      .color-scheme-dark & {
        color: $white;
        color: var(--white, $white);
      }
    }
  }
}