/* *********************** */
/* *********************** */
/* ****** home *********** */
/* *********************** */
/* *********************** */

#home {
  margin-top: 0;
}

#home h1 {
  height: 4em;
  color: var(--color-primary);
  font-weight: 800;

  display: grid;
  place-items: center;
}

#home h2 {
  position: absolute;
  color: transparent;
}

#home section {
  width: 100%;
  height: calc(100% - 6em);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
}

#home section .imgContainer {
  width: 70vw;
  height: 70vw;
  overflow: hidden;
}

#home section .imgContainer img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

#home section .info .name {
  font-size: 2em;
  letter-spacing: normal;
  margin: 0.3em 0;
}

#home section .info {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

#home section .socialMediaList {
  width: 100%;
  height: 6em;
  list-style: none;

  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1em;
}

#home section .socialMediaList li {
  width: 3em;
  height: 3em;
  border-radius: 50%;

  box-shadow: var(--box-shadow-size) var(--color-primary);
}

#home section .socialMediaList li .item {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;

  display: grid;
  place-items: center;

  border: none;
  background-color: var(--color-tertiary);
}

#home section .socialMediaList li .item svg {
  width: 70%;
  height: auto;
  fill: var(--color-primary);
}

@media (min-width: 1028px) {
  #home section {
    flex-direction: row;
    gap: 2em;
  }

  #home section .imgContainer {
    width: 40vw;
    height: 40vw;
    order: 1;
  }

  #home section .info {
    width: 40%;
  }

  #home #home section .socialMediaList {
    margin-top: 0.5em;
  }
}