/* =========================================================
   Aromatic Image Grid — image-grid-section
   Desktop 6 · Tablet 4 · Mobile 2
   ========================================================= */

.aro-ig {
  --aro-ig-ink: #1a1a1a;
  --aro-ig-muted: #9a9aa0;
  --aro-ig-rule: #d8d8d8;
  --aro-ig-notch: clamp(12px, 1.6vw, 20px);
  width: 100%;
  background: #fff;
}

.aro-ig__inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 56px 32px 48px;
}

.aro-ig__head {
  text-align: center;
  margin-bottom: 36px;
}

.aro-ig__title {
  font-family: var(--aro-font);
  font-size: clamp(22px, 2.2vw, 28px);
  font-weight: 700;
  color: var(--aro-ig-ink);
  margin: 0 0 8px;
  line-height: 1.4;
}

.aro-ig__sub {
  font-family: var(--aro-font);
  font-size: 14.5px;
  font-weight: 400;
  color: var(--aro-ig-muted);
  margin: 0 0 16px;
  line-height: 1.7;
}

.aro-ig__rule {
  display: block;
  width: 48px;
  height: 1px;
  margin: 0 auto;
  background: var(--aro-ig-rule);
}

.aro-ig__grid {
  --cols: 2;
  --gap: 12px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--gap);
}

.aro-ig__item {
  display: block;
  min-width: 0;
  box-sizing: border-box;
  flex: 0 0 calc((100% - (var(--cols) - 1) * var(--gap)) / var(--cols));
  max-width: calc((100% - (var(--cols) - 1) * var(--gap)) / var(--cols));
  text-decoration: none;
  color: inherit;
}

.aro-ig__media {
  display: block;
  width: 100%;
  aspect-ratio: var(--aro-ig-ratio, 3/4);
  overflow: hidden;
  background: #f3f2ef;
  --n: var(--aro-ig-notch);
  -webkit-mask-image:
    radial-gradient(circle var(--n) at 0 0, #0000 98%, #000 100%),
    radial-gradient(circle var(--n) at 100% 0, #0000 98%, #000 100%),
    radial-gradient(circle var(--n) at 0 100%, #0000 98%, #000 100%),
    radial-gradient(circle var(--n) at 100% 100%, #0000 98%, #000 100%);
  -webkit-mask-size: 51% 51%;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: 0 0, 100% 0, 0 100%, 100% 100%;
  mask-image:
    radial-gradient(circle var(--n) at 0 0, #0000 98%, #000 100%),
    radial-gradient(circle var(--n) at 100% 0, #0000 98%, #000 100%),
    radial-gradient(circle var(--n) at 0 100%, #0000 98%, #000 100%),
    radial-gradient(circle var(--n) at 100% 100%, #0000 98%, #000 100%);
  mask-size: 51% 51%;
  mask-repeat: no-repeat;
  mask-position: 0 0, 100% 0, 0 100%, 100% 100%;
}

.aro-ig__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

a.aro-ig__item {
  transition: transform 0.25s ease, opacity 0.25s ease;
}

a.aro-ig__item:hover,
a.aro-ig__item:focus-visible {
  transform: translateY(-3px);
  opacity: 0.96;
}

a.aro-ig__item:focus-visible {
  outline: 2px solid #1a428a;
  outline-offset: 4px;
}

@media (min-width: 761px) {
  .aro-ig__grid {
    --cols: 4;
    --gap: 16px;
  }
}

@media (min-width: 1100px) {
  .aro-ig__inner {
    padding: 72px 40px 64px;
  }

  .aro-ig__head {
    margin-bottom: 44px;
  }

  .aro-ig__grid {
    --cols: 6;
    --gap: 18px;
  }
}

@media (max-width: 760px) {
  .aro-ig__inner {
    padding: 40px 16px 36px;
  }

  .aro-ig__head {
    margin-bottom: 24px;
  }

  .aro-ig__sub {
    font-size: 13.5px;
  }
}

@media (prefers-reduced-motion: reduce) {
  a.aro-ig__item {
    transition: none;
  }

  a.aro-ig__item:hover,
  a.aro-ig__item:focus-visible {
    transform: none;
  }
}