// -----------------------------------------------------------------------------
// This file contains styles that are specific to the home page.
// -----------------------------------------------------------------------------

.hero {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 3rem 5vw;

  @include respond-to('medium') {
    flex-wrap: nowrap;
  }

  @include respond-to('m-large') {
    padding: 80px 0;
  }
}

.hero-info {

  @include respond-to('medium') {
    flex: 0 1 65%;
  }

  .hero-title {
    font-weight: 900;
    margin-top: 0;
    @include font-size('xl');
  }

  .hero-subtitle {
    color: var(--color-contrast-medium-high);
    @include font-size('base');
  }
}

.hero-owner {
  display: flex;
  flex-direction: column;
  align-items: center;
  row-gap: 20px;

  @include respond-to('medium') {
    flex: 0 1 35%;
  }

  .hero-avatar {
    max-width: 300px;
    width: 100%;
    height: auto;
    border-radius: 20px;
    
    @include respond-to('medium') {
      max-width: 100%;
      width: unset;
    }
  }
}

.home-section-title {

  &::after {
    background-color: var(--color-contrast-medium);
    content: "";
    display: block;
    height: 2px;
    position: relative;
    width: 80px;
    top: 8px;
  }
}

.home-section-posts-title {
  @extend .home-section-title;
  margin: 0;
}

.home-title-dropdown {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 30px;
  margin-bottom: 50px;
}

#select-posts {
  @include font-size('sm');
  padding: 0.4rem;
  border: 1px solid var(--color-contrast-medium-low);
  border-radius: 5px;
  color: var(--color-contrast-high);
  background-color: var(--color-contrast-lower);
}

.see-more {
  margin-top: 30px;
}

.see-more-projects {
  color: var(--color-contrast-medium);
  font-weight: 300;
  font-size: var(--font-size-base);
}