// SUB-HEADER FORMATTING FOR HOME PAGE //
@mixin home-sub-header-formatting {
  font-family: 'Montserrat', sans-serif;
  font-size: $sub-header-font-size;
  color: $navy-2;
}

// INITIAL CONDITIONS FOR HIDING DROPDOWN CONTENT //
@mixin hide-content {
  display: none;
  overflow: hidden;
}

// STYLING BUTTON APPEARANCE
@mixin btn-styling {
  align-self: center;
  cursor: pointer;
  border: none;
  border-radius: 5px;
  background-color: $white;
  font-size: $button-font-size;
  color: $navy-2;

  &:hover,
  &:active,
  &:focus {
    background-color: $grey-2;
  }
}

// ONLINE PROFILE, EMAIL, AND SOCIAL MEDIA FORMATTING //
@mixin contact-formatting {
  display: grid;
  grid-template-rows: repeat(2, max-content);
  grid-template-columns: repeat(4, min-content);
  gap: 1rem 0;
  justify-content: center;

  &__header {
    grid-row: 1 / 2;
    grid-column: 1 / span 5;
    justify-self: center;
  }

  &__icon {
    grid-row: 2 / 3;
    height: 6rem;
    width: 6rem;
    margin: 0 2rem;
    padding-top: 1rem;

    @media only screen and (max-width: $bp-laptop) {
      height: 5rem;
      width: 5rem;
      margin: 0 1rem;
    }

    &-box {
      border-top: 1px solid $navy-2;
    }
  }
}

// BLOG AND PROJECTS BASE FORMATTING //
@mixin blog-and-project-formatting {
  background-color: $white-2;

  &__focus-container {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: repeat(auto, min-content);
    margin: 10rem;
    padding: 10rem;
    border-radius: 5px;
    background-color: $white;

    @media only screen and (max-width: $bp-tablet) {
      margin: 5rem;
      padding: 5rem;
    }

    @media only screen and (max-width: $bp-mobile-l) {
      margin: 0;
      padding: 5rem;
    }
  }

  &__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 9px;

    &--smaller {
      width: 50%;
      height: 50%;
    }
  }

  &__main-heading {
    font-size: 4.2rem;
    line-height: 4.2rem;
  }

  &__sub-heading {
    font-weight: 400;
    font-size: 1.6rem;
  }

  &__heading {
    margin-bottom: 1.2rem;
    line-height: 3.2rem;
  }

  &__list {
    margin-left: 1.6rem;
  }

  &__list li {
    margin: 1.2rem 0 1.2rem 0;
  }
}