.horizontal-gray-line {
  display: inline-block;
  margin: 3.4vh 0;
  width: 100%;

  border-bottom: 1px #d0d0d0 solid;
  border-radius: 15px;
}

.car_title {
  font-weight: 600;
  font-size: 5.5vh;
  line-height: 6vh;
  margin-top: 2vh;
  margin-bottom: 4vh;
}

.car {
  display: flex;
  flex-direction: row;
  justify-content: space-between;

  > div:nth-child(2) {
    display: flex;
    flex-direction: column;
  }
}

.images {
  display: flex;
  flex-direction: column;
  margin-right: 3vw;

  div {
    position: relative;
  }

  .main_pic {
    display: flex;

    .main_img {
      height: 60vh;
      width: 43vw;
      object-fit: contain;
      border-radius: 2vh;
      margin: 0;
    }

    .next {
      aspect-ratio: 1;
      position: absolute;
      height: 6vh;
      top: 30vh;
      right: 2.5vw;
      cursor: pointer;
    }
    .previous {
      aspect-ratio: 1;
      position: absolute;
      height: 6vh;
      top: 30vh;
      right: 36vw;
      cursor: pointer;
      transform: rotate(180deg);
    }
  }

  .all_pic {
    display: flex;
    width: 43vw;
    overflow-x: auto;

    div {
      display: flex;
      width: 15vw;
      height: 22vh;
      cursor: pointer;
      margin-top: 2vh;
      img {
        width: 100%;
        height: auto;
        min-width: 10vw;
        object-fit: cover;
        border-radius: 2vh;
      }
    }
  }
}

.pic_line {
  display: flex;
  .next {
    aspect-ratio: 1;
    position: absolute;
    height: 6vh;
    top: 10vh;
    z-index: 1;
    right: 0.5vw;
    cursor: pointer;
  }
  .previous {
    aspect-ratio: 1;
    position: absolute;
    height: 6vh;
    top: 10vh;
    z-index: 1;
    right: 38vw;
    cursor: pointer;
    transform: rotate(180deg);
  }
}
.info_car {
  background-color: #f8f8f8;
  border-radius: 5vh;
  min-width: 24vw;
  height: fit-content;
  padding: 5vh 2.5vw;

  .price {
    font-weight: 700;
    font-size: 3.8vh;
    line-height: 4.1vh;
    margin-bottom: 5vh;
  }

  > div {
    display: flex;
    justify-content: space-between;

    p {
      line-height: 3vh;
      font-size: 2.6vh;

      &:nth-child(1) {
        font-weight: 600;
      }
      &:nth-child(2) {
        font-weight: 400;
      }
    }
  }
}

.additional_info {
  background-color: #f8f8f8;
  border-radius: 4vh;
  margin-top: 4vh;
  padding: 4.8vh 2.8vw;

  .additonal_title {
    font-weight: 600;
    font-size: 3.8vh;
    line-height: 4vh;
    margin-bottom: 2vh;
  }

  .additonal_text {
    font-weight: 400;
    font-size: 1.8vh;
    line-height: 3vh;
    margin-bottom: 3vh;

    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
  }

  .additonal_read_more {
    font-weight: 600;
    font-size: 2vh;
    line-height: 2.2vh;
    margin-bottom: 2vh;
    cursor: pointer;
    width: fit-content;
  }
}

@media only screen and (max-width: 899px) {
  .horizontal-gray-line {
    margin: 2vh 0;
  }

  .car_title {
    font-size: 3.4vh;
    line-height: 3.6vh;
    margin-top: 5vh;
    margin-bottom: 2vh;
  }

  .car {
    flex-direction: column;

    > div:nth-child(2) {
      margin-top: 2vh;
    }
  }

  .images {
    margin-right: 0;

    .main_pic {
      .main_img {
        height: 28vh;
        width: 100%;
      }

      .next {
        top: 11vh;
        right: 3vw;
      }
      .previous {
        top: 11vh;
        right: 66vw;
      }
    }

    .all_pic {
      width: 100%;

      div {
        width: 66vw;
        height: 10vh;
        img {
          border-radius: 1vh;
          min-width: 26vw;
        }
      }
    }
  }

  .pic_line {
    display: flex;
    .next {
      display: none;
    }
    .previous {
      display: none;
    }
  }

  .info_car {
    padding: 5vh 10vw;

    .price {
      font-size: 3vh;
      line-height: 3.2vh;
      margin-bottom: 3vh;
    }

    > div {
      flex-direction: column;

      p {
        line-height: 2.4vh;
        font-size: 2.2vh;

        &:nth-child(2) {
          margin-top: 1vh;
        }
      }
    }
  }

  .additional_info {
    margin-top: 0vh;
    padding: 3vh 6vw;

    .additonal_title {
      font-size: 2.4vh;
      line-height: 2.6vh;
    }

    .additonal_text {
      font-size: 1.6vh;
      line-height: 2.8vh;
    }

    .additonal_read_more {
      font-size: 1.8vh;
      line-height: 2vh;
      margin-bottom: 1vh;
    }
  }
}
