@charset "UTF-8";

.works-nav {
  display: flex;
  top: 110px;
  justify-content: end;
  background-color: #FCFCFC;
  margin-bottom: clamp(17px, 3%, 27px);
}

.works-nav__btn {
  padding: 0 30px;
  font-size: 1rem;
  font-weight: 500;
  position: relative;
  transition: opacity .3s ease;
  cursor: pointer;
  color: #a7a7a7;
  transition: color .3s ease;
}

.works-nav__btn:hover {
  color: #4dc5e9;
}

.works-nav__btn.active {
  color: #66c6e4;
  font-weight: 700;
}

.works-nav__btn:not(:last-child)::after {
  content: "";
  width: 1px;
  height: 23px;
  background-color: #a2a2a2;
  position: absolute;
  top: 50%;
  right: 0;
  transform: translate(-50%, -50%);
  opacity: .5;
}

.works__content {
  display: flex;
  align-items: start;
  gap: 5%;
  padding: clamp(40px, 10%, 90px) 0;
  transform: translateY(30%);
}

.works__content.visible {
  transform: translateY(0%);
}

.works__content:not(:last-child) {
  border-bottom: solid 1px #50505020;
}


.works-content__img-area {
  width: calc((100% - 5%)/2);
  height: fit-content;
  display: block;
}

.works-content__img-area img {
  width: 100%;
  box-shadow: 0px 0px 8px #00000010;
  transition: filter .3s ease, transform .3s ease;
}

.works-content__img-area img:hover {
  filter: brightness(.99);
  transform: scale(1.01);
}

.works-content__text-group {
  width: calc((100% - 5%)/2);
}

.works-content__title {
  font-size: 1.3rem;
  font-weight: 600;
  margin-bottom: 5%;
}

.works-content__main-text {
  margin-bottom: 4%;
}


@media(max-width:780px) {
  .works-nav__btn {
    padding: 0 22px;
  }

  .works__content {
    flex-direction: column;
    align-items: center;
    gap: clamp(5px, 3vw, 20px);
  }

  .works-content__img-area {
    width: 100%;
    max-width: 500px;
  }

  .works-content__text-group {
    width: 100%;
    max-width: 500px;
  }

  .works-content__title {
    text-align: center;
  }




}