/* HOME */
.home_container {
  gap: 1rem;
}

.type {
  color: var(--first-color);
}

.home_content {
  grid-template-columns: 0.5fr 3fr;
  padding-top: 3.5rem;
  align-items: center;
}

.home_social {
  display: grid;
  grid-template-columns: max-content;
  row-gap: 1rem;
}

.home_social-icon {
  font-size: 1.25rem;
  color: var(--first-color);
}

.home_social-icon:hover {
  color: var(--first-color-alt);
}

.home_blob {
  width: 200px;
  fill: var(--first-color);
}

.home_blob-img {
  width: 170px;
}

.home_data {
  grid-column: 1 / 3;
}

.home_title {
  font-size: var(--big-font-size);
}

.home_subtitle {
  font-size: var(--h3-font-size);
  color: var(--text-color);
  font-weight: var(--font-medium);
  margin-bottom: var(--mb-0-75);
}

.home_description {
  margin-bottom: var(--mb-2);
}

.home_buttons {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.home_scroll {
  display: none;
}

.home_scroll-button {
  color: var(--first-color);
  transition: 0.3s;
}

.home_scroll-button:hover {
  transform: translateY(0.25rem);
}

.home_scroll-mouse {
  font-size: 2rem;
}

.home_scroll-name {
  font-size: var(--small-font-size);
  color: var(--title-color);
  font-weight: var(--font-medium);
  margin-right: var(--mb-0-25);
}

.home_scroll-arrow {
  font-size: 1.25rem;
}

/* MEDIA QUERIES */

/* For small devices */
@media screen and (max-width: 350px) {
  .home_content {
    grid-template-columns: 0.25fr 3fr;
  }

  .home_buttons {
    gap: 0.6rem;
  }
}

/* For medium devices */
@media screen and (min-width: 568px) {
  .home_content {
    grid-template-columns: max-content 1fr 1fr;
  }

  .home_data {
    grid-column: initial;
  }

  .home_img {
    order: 1;
    justify-self: center;
  }
}

@media screen and (min-width: 768px) {
  .home_container {
    row-gap: 5rem;
  }

  .home_content {
    padding-top: 5.5rem;
    column-gap: 2rem;
  }

  .home_blob {
    width: 270px;
  }

  .home_scroll {
    display: block;
  }

  .home_scroll-button {
    margin-left: 3rem;
  }
}

/* For large devices */
@media screen and (min-width: 1024px) {
  .home_blob {
    width: 320px;
  }

  .home_social {
    transform: translateX(-6rem);
  }
}