/* ==========================================================================
   Instagram
   ========================================================================== */
.instagram {
  background: var(--color-tan-soft);
  padding: 96px 24px 96px;
}

@media (min-width: 861px) {
  .instagram {
    padding-top: max(60px, 8.19vw);
  }
}

.instagram__inner {
  max-width: 1200px;
  margin: 0 auto;
  text-align: center;
}

.instagram__grid {
  margin-top: 56px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.instagram__grid li {
  position: relative;
  overflow: hidden;
  aspect-ratio: 1 / 1;
}

.instagram__grid img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
}

.instagram__divider {
  margin: 20px auto 0;
  border: none;
  border-top: 1px solid #c1bcb5;
}

.reserve-btn--insta {
  margin-top: 32px;
  font-family: var(--font-view-more);
  font-size: 24px;
  line-height: 1.208;
  padding: 12px 48px;
}

@media (min-width: 861px) {
  .instagram__grid {
    max-width: max(640px, 65.56vw);
    margin-left: auto;
    margin-right: auto;
    gap: max(12px, 1.11vw);
  }

  .instagram__grid li {
    aspect-ratio: 224 / 252.28;
  }

  .instagram__divider {
    max-width: max(640px, 65.56vw);
    margin-top: max(12px, 1.25vw);
  }

  .reserve-btn--insta {
    margin-top: max(20px, 2.15vw);
  }
}


/* Responsive — Tablet (<=1024px): Instagram固有分 */
@media (max-width: 1024px) {
  .instagram__grid {
    gap: 16px;
  }
}

/* Responsive — Mobile (<=680px): Instagram固有分 */
@media (max-width: 680px) {
  .instagram {
    padding: 80px 16px 88px;
  }

  .instagram__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}