@charset "utf-8";

.profileDetails {
  display: grid;
  gap: 0 min(8.69vw,120px);
  grid-template-columns: min(28.98vw,400px) auto;
}
@media screen and (width <= 768px) {
  .profileDetails {
    grid-template-columns: 100%;
  }
}

.profileDetails-img-wrap {
  position: relative;
  & span {
    position: absolute;
    bottom: 0.6em;
    right: -1em;
    translate: 0 50%;
    color: var(--link-color-main);
    font-family: "Montserrat", sans-serif;
    font-size: min(8.69vw,120px);
    font-weight: 700;
    line-height: 1;
  }
}
@media screen and (width <= 768px) {
  .profileDetails-img {
    width: max(53.33vw,320px);
    margin: 0 auto;
    & span {
      right: max(3.33vw,20px);
      bottom: 0;
      font-size: max(16.66vw,100px);
    }
  }
}

@media screen and (width <= 768px) {
  .profileDetails-contents {
    padding-top: max(13.33vw,50px);
  }
}

.profileDetails-name {
  color: var(--txt-color-main);
  font-size: 30px;
  font-weight: 700;
  line-height: 1.46;
  & span {
    display: block;
    margin-top: 5px;
    font-size: 20px;
    font-weight: 500;
    line-height: 1.45;
  }
}
@media screen and (width <= 768px) {
  .profileDetails-name {
    font-size: max(5.33vw,20px);
    & span {
      font-size: max(4.26vw,16px);
    }
  }
}

.profileDetailsTxtArea {
  margin-top: 20px;
  color: var(--txt-color-main);
  font-size: 16px;
  line-height: 1.5;
}
@media screen and (width <= 768px) {
  .profileDetailsTxtArea {
    font-size: max(4.26vw,16px);
  }
}

.profileDetailsSns {
  display: flex;
  gap: 10px;
  margin-top: 20px;
  & a {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    width: 40px;
    height: auto;
    aspect-ratio: 1;
    border-radius: 50%;
    background-color: var(--color-black);
    transition: outline .2s;
    &:hover {
      outline: 2px solid #FFF;
    }
  }
}
@media screen and (width <= 768px) {
  .profileDetailsSns {
    & a {
      width: max(8vw,40px);
    }
  }
}

.profileDetalisComment {
  margin-top: 1.5em;
  & img {
    width: 90%;
    display: block;
    margin: 0 auto;
  }
}
@media screen and (width <= 768px) {
  .profileDetalisComment {
    & img {
      width: 100%;
    }
  }
}