/* ==================================================
   AREA
================================================== */

/* ==================================================
   AREA SECTION
================================================== */

.area {
  background: #ffffff;

  padding-block: 5rem;
}

/* ==================================================
   AREA LAYOUT
================================================== */

.area__layout {
  display: grid;

  grid-template-columns: 0.9fr 1.1fr;

  gap: 4rem;

  align-items: center;
}

/* ==================================================
   AREA CONTENT
================================================== */

.area__content {
  max-width: 500px;
}

.area__description {
  max-width: 460px;

  margin-bottom: 1.75rem;

  color: #6b7280;

  font-size: 0.9rem;

  line-height: 1.7;
}

/* ==================================================
   AREA LIST
================================================== */

.area__list {
  display: grid;

  grid-template-columns: repeat(2, 1fr);

  gap: 0.75rem 1.25rem;

  margin-bottom: 1.5rem;
}

.area__list li {
  display: flex;
  align-items: center;

  gap: 0.6rem;

  color: #374151;

  font-size: 0.85rem;
  font-weight: 500;
}

.area__list li i {
  display: flex;
  align-items: center;
  justify-content: center;

  flex-shrink: 0;

  width: 1.8rem;
  height: 1.8rem;

  background: #fff7ed;

  border: 1px solid #fed7aa;

  border-radius: 50%;

  color: #d97706;

  font-size: 0.65rem;
}

/* ==================================================
   AREA NOTE
================================================== */

.area__note {
  margin-bottom: 0.9rem;

  color: #6b7280;

  font-size: 0.8rem;
}

/* ==================================================
   AREA MAP
================================================== */

.area__map {
  position: relative;

  min-height: 380px;

  overflow: hidden;

  background: #eef1f4;

  border: 1px solid #e5e7eb;

  border-radius: 1rem;

  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.05);
}

/* area map iframe */

.area__map iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* ==================================================
   MAP PLACEHOLDER
================================================== */

.area__map-placeholder {
  position: absolute;

  top: 50%;
  left: 50%;

  display: flex;
  align-items: center;
  justify-content: center;

  width: 100%;
  height: 100%;

  transform: translate(-50%, -50%);

  z-index: 1;
}

/* ==================================================
   TABLET
   1024px
================================================== */

@media (max-width: 1024px) {
  .area {
    padding-block: 4.5rem;
  }

  .area__layout {
    gap: 3rem;
  }

  .area__content {
    max-width: 460px;
  }

  .area__description {
    font-size: 0.85rem;
  }

  .area__list li {
    font-size: 0.8rem;
  }

  .area__map {
    min-height: 340px;
  }
}

/* ==================================================
   MOBILE
   768px
================================================== */

@media (max-width: 768px) {
  .area {
    padding-block: 4rem;
  }

  .area__layout {
    grid-template-columns: 1fr;

    gap: 2.5rem;
  }

  /* Content */

  .area__content {
    max-width: 600px;

    margin-inline: auto;

    text-align: center;
  }

  .area__description {
    max-width: 560px;

    margin-inline: auto;

    margin-bottom: 1.5rem;

    font-size: 0.9rem;
  }

  /* List */

  .area__list {
    max-width: 420px;

    margin-inline: auto;

    text-align: left;
  }

  .area__note {
    margin-top: 0.25rem;

    font-size: 0.8rem;
  }

  .area__content .button {
    justify-content: center;
  }

  /* Map */

  .area__map {
    width: 100%;

    max-width: 600px;

    min-height: 320px;

    margin-inline: auto;
  }
}

/* ==================================================
   SMALL MOBILE
   480px
================================================== */

@media (max-width: 480px) {
  .area {
    padding-block: 3.5rem;
  }

  .area__layout {
    gap: 2rem;
  }

  .area__description {
    font-size: 0.85rem;

    line-height: 1.6;
  }

  .area__list {
    grid-template-columns: 1fr;

    gap: 0.65rem;

    max-width: 280px;
  }

  .area__list li {
    font-size: 0.8rem;
  }

  .area__list li i {
    width: 1.7rem;
    height: 1.7rem;
  }

  .area__note {
    font-size: 0.75rem;
  }

  .area__map {
    min-height: 250px;

    border-radius: 0.85rem;
  }

  .area__map-placeholder i {
    width: 3.5rem;
    height: 3.5rem;

    font-size: 1.2rem;
  }

  .area__map-placeholder span {
    font-size: 0.75rem;
  }
}