.hero {
  width: 100%;
  background: #08162b;
  overflow: hidden;
}

.hero-inner {
  width: 100%;
  max-width:2200px;
  margin: 0 auto;

  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.hero-image-wrap,
.hero-content {
  width: 100%;
  height: clamp(260px, 26vw, 450px);
  min-width: 0;
  overflow: hidden;
}
.hero-content {
  position: relative;
}

.hero-main-image,
.hero-right-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* 오른쪽 이미지 안 버튼 클릭 영역 */
.hero-real-button {
  position: absolute;
  left: 50%;
  bottom: 20px;
  transform: translateX(-50%);

  width: 60%;
  height: 90px;

  display: block;
  z-index: 10;
  background: transparent;
}

/* 모바일 */
@media (max-width: 768px) {
  .hero-inner {
    grid-template-columns: 1fr;
  }

  .hero-image-wrap,
  .hero-content {
    height: 360px;
  }

  .hero-real-button {
    bottom: 16px;
    width: 70%;
    height: 70px;
  }
}
@media (max-width:760px) {

  .hero-inner {
    grid-template-columns: 1fr;
  }
}