@charset "utf-8";

@keyframes shake { 
  10%, 90% { transform: translate3d(-1px, 0px, 0px); }
  20%, 80% { transform: translate3d(2px, 0px, 0px); }
  30%, 50%, 70% { transform: translate3d(-4px, 0px, 0px); }
  40%, 60% { transform: translate3d(4px, 0px, 0px); }
}

@keyframes spin { 
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.Explore { padding: 80px 20px; text-align: center; }

.Explore__title { margin-bottom: 30px; }

.Explore__wrapper { column-gap: 30px; justify-content: center; display: flex; }

@media (max-width: 863px) {
  .Explore__wrapper { gap: 20px 0px; flex-wrap: wrap; }
}

.Explore__wrapper > .col { flex-basis: 31%; max-width: 380px; color: var(--white); height: 435px; overflow: hidden; border-radius: 20px; }

@media (max-width: 863px) {
  .Explore__wrapper > .col { max-width: 335px; flex-basis: 100%; height: 335px; }
}

.Explore__wrapper > .col > .over { top: 0px; position: absolute; z-index: 1; width: 100%; height: 100%; background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.7)); }

.Explore__wrapper > .col img { position: absolute; top: 0px; left: 0px; margin: auto; width: 100%; height: 100%; object-fit: cover; }

.Explore__wrapper > .col .body { z-index: 1; width: 100%; max-width: 235px; left: 50%; transform: translate(-50%); position: absolute; bottom: 30px; }

.img-hover:hover img { transform: scale(1.05); }

.img-hover img { transition: transform 0.3s; }

h2, .h2 { font-family: dia, sans-serif; font-weight: 500; letter-spacing: -1.5px; font-size: 25px; line-height: 1; }

@media (min-width: 864px) {
  h2, .h2 { letter-spacing: -2px; font-size: 30px; line-height: 1.5; }
}

h1, .h1 { letter-spacing: -2px; font-family: dia, sans-serif; font-weight: 500; }

@media (min-width: 864px) {
  h1, .h1 { letter-spacing: -3px; font-size: 40px; }
}