/* Three linked thumbnails, each with only its editable name on the image. */
.ak-image-trio { padding: 3rem 1rem; background: var(--ak-gray-50, #f9fafb); }
.ak-image-trio__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; }
.ak-image-trio__card { min-width: 0; border-radius: .5rem; overflow: hidden; }
.ak-image-trio__link { position: relative; display: block; height: 100%; color: #fff; text-decoration: none; }
.ak-image-trio__link:hover { color: #fff; text-decoration: none; }
.ak-image-trio__link::after { content: ''; position: absolute; inset: 40% 0 0; background: linear-gradient(transparent, rgba(0, 0, 0, .72)); pointer-events: none; }
a.ak-image-trio__link:focus-visible { outline: 3px solid #bd1d26; outline-offset: -3px; }
.ak-image-trio__media { display: block; width: 100%; aspect-ratio: var(--ak-trio-ratio, 4/3); overflow: hidden; background: var(--ak-gray-100, #f3f4f6); }
.ak-image-trio__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ak-image-trio__title { position: absolute; z-index: 1; bottom: 1rem; left: 1rem; right: 1rem; margin: 0; color: #fff; font-size: .9375rem; line-height: 1.4; font-weight: 500; overflow-wrap: anywhere; text-shadow: 0 1px 3px rgba(0, 0, 0, .3); }
a.ak-image-trio__link:hover .ak-image-trio__title { text-decoration: underline; text-underline-offset: .2em; }
@media (max-width: 767.98px) {
  .ak-image-trio__grid { gap: .5rem; }
  .ak-image-trio__card { border-radius: .25rem; }
  .ak-image-trio__media { height: var(--ak-mobile-image-height, auto); aspect-ratio: 3/4; }
  .ak-image-trio__title { bottom: .5rem; left: .5rem; right: .5rem; font-size: .6875rem; line-height: 1.3; }
}

/* Larger portrait presentation; the compact version remains available. */
.ak-image-trio.ak-image-trio--large {
  padding: 3rem clamp(1rem, 2.2vw, 2.5rem) 3.5rem;
}
.ak-image-trio--large > .container { width: 100%; max-width: 1600px; padding-right: 0; padding-left: 0; }
.ak-image-trio--large .ak-fabrics__head { max-width: 56rem; margin: 0 auto 2.25rem; }
.ak-image-trio--large .ak-image-trio__grid { gap: clamp(.75rem, 1.6vw, 1.5rem); }
.ak-image-trio--large .ak-image-trio__card { border-radius: .5rem; }
.ak-image-trio--large .ak-image-trio__media { aspect-ratio: 7 / 10; }
.ak-image-trio--large .ak-image-trio__media img { transition: transform .35s ease; }
.ak-image-trio--large .ak-image-trio__link::after { inset: 60% 0 0; }
.ak-image-trio--large .ak-image-trio__title { bottom: 1.25rem; left: 1.25rem; right: 1.25rem; font-size: 1rem; text-align: center; }
@media (hover: hover) {
  .ak-image-trio--large a.ak-image-trio__link:hover img { transform: scale(1.025); }
}
@media (max-width: 767.98px) {
  .ak-image-trio.ak-image-trio--large { padding: 2rem 0 2.5rem; }
  .ak-image-trio--large .ak-fabrics__head { padding: 0 1rem; margin-bottom: 1.5rem; }
  .ak-image-trio--large .ak-image-trio__grid {
    display: flex;
    gap: .75rem;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 1rem;
    padding: 0 1rem .75rem;
  }
  .ak-image-trio--large .ak-image-trio__card { flex: 0 0 76%; scroll-snap-align: start; }
  .ak-image-trio--large .ak-image-trio__media { height: var(--ak-mobile-image-height, auto); }
  .ak-image-trio--large .ak-image-trio__title { bottom: 1rem; left: 1rem; right: 1rem; font-size: .9375rem; }
}
@media (prefers-reduced-motion: reduce) {
  .ak-image-trio--large .ak-image-trio__media img { transition: none; }
}