/* ---------------------------------------------------------------------------
 * menu_list (live ContentListImage)
 *
 * Live swaps the square preview image as you hover a menu name (JS). The markup
 * here stacks every menu's preview in the same frame and does the swap in pure
 * CSS with :has(), so no per-layout script is needed.
 *
 * Index N below is 1-based over the <li> list; the matching image carries the
 * 0-based class .sm-menu-image--{N-1}.
 * ------------------------------------------------------------------------- */

.ContentListImage__canvas {
  position: relative;
}

.ContentListImage__canvas .sm-menu-image {
  opacity: 0;
  transition: opacity var(--transition-medium);
}

/* First menu's preview is the resting state. */
.ContentListImage__canvas .sm-menu-image--0 {
  opacity: 1;
}

.ContentListImage__container:has(.ContentListImage__links > li:nth-child(1) .ContentListImage__link:hover) .sm-menu-image,
.ContentListImage__container:has(.ContentListImage__links > li:nth-child(1) .ContentListImage__link:focus-visible) .sm-menu-image {
  opacity: 0;
}

.ContentListImage__container:has(.ContentListImage__links > li:nth-child(1) .ContentListImage__link:hover) .sm-menu-image--0,
.ContentListImage__container:has(.ContentListImage__links > li:nth-child(1) .ContentListImage__link:focus-visible) .sm-menu-image--0 {
  opacity: 1;
}

.ContentListImage__container:has(.ContentListImage__links > li:nth-child(2) .ContentListImage__link:hover) .sm-menu-image,
.ContentListImage__container:has(.ContentListImage__links > li:nth-child(2) .ContentListImage__link:focus-visible) .sm-menu-image {
  opacity: 0;
}

.ContentListImage__container:has(.ContentListImage__links > li:nth-child(2) .ContentListImage__link:hover) .sm-menu-image--1,
.ContentListImage__container:has(.ContentListImage__links > li:nth-child(2) .ContentListImage__link:focus-visible) .sm-menu-image--1 {
  opacity: 1;
}

.ContentListImage__container:has(.ContentListImage__links > li:nth-child(3) .ContentListImage__link:hover) .sm-menu-image,
.ContentListImage__container:has(.ContentListImage__links > li:nth-child(3) .ContentListImage__link:focus-visible) .sm-menu-image {
  opacity: 0;
}

.ContentListImage__container:has(.ContentListImage__links > li:nth-child(3) .ContentListImage__link:hover) .sm-menu-image--2,
.ContentListImage__container:has(.ContentListImage__links > li:nth-child(3) .ContentListImage__link:focus-visible) .sm-menu-image--2 {
  opacity: 1;
}

.ContentListImage__container:has(.ContentListImage__links > li:nth-child(4) .ContentListImage__link:hover) .sm-menu-image,
.ContentListImage__container:has(.ContentListImage__links > li:nth-child(4) .ContentListImage__link:focus-visible) .sm-menu-image {
  opacity: 0;
}

.ContentListImage__container:has(.ContentListImage__links > li:nth-child(4) .ContentListImage__link:hover) .sm-menu-image--3,
.ContentListImage__container:has(.ContentListImage__links > li:nth-child(4) .ContentListImage__link:focus-visible) .sm-menu-image--3 {
  opacity: 1;
}

.ContentListImage__container:has(.ContentListImage__links > li:nth-child(5) .ContentListImage__link:hover) .sm-menu-image,
.ContentListImage__container:has(.ContentListImage__links > li:nth-child(5) .ContentListImage__link:focus-visible) .sm-menu-image {
  opacity: 0;
}

.ContentListImage__container:has(.ContentListImage__links > li:nth-child(5) .ContentListImage__link:hover) .sm-menu-image--4,
.ContentListImage__container:has(.ContentListImage__links > li:nth-child(5) .ContentListImage__link:focus-visible) .sm-menu-image--4 {
  opacity: 1;
}

.ContentListImage__container:has(.ContentListImage__links > li:nth-child(6) .ContentListImage__link:hover) .sm-menu-image,
.ContentListImage__container:has(.ContentListImage__links > li:nth-child(6) .ContentListImage__link:focus-visible) .sm-menu-image {
  opacity: 0;
}

.ContentListImage__container:has(.ContentListImage__links > li:nth-child(6) .ContentListImage__link:hover) .sm-menu-image--5,
.ContentListImage__container:has(.ContentListImage__links > li:nth-child(6) .ContentListImage__link:focus-visible) .sm-menu-image--5 {
  opacity: 1;
}

.ContentListImage__container:has(.ContentListImage__links > li:nth-child(7) .ContentListImage__link:hover) .sm-menu-image,
.ContentListImage__container:has(.ContentListImage__links > li:nth-child(7) .ContentListImage__link:focus-visible) .sm-menu-image {
  opacity: 0;
}

.ContentListImage__container:has(.ContentListImage__links > li:nth-child(7) .ContentListImage__link:hover) .sm-menu-image--6,
.ContentListImage__container:has(.ContentListImage__links > li:nth-child(7) .ContentListImage__link:focus-visible) .sm-menu-image--6 {
  opacity: 1;
}

.ContentListImage__container:has(.ContentListImage__links > li:nth-child(8) .ContentListImage__link:hover) .sm-menu-image,
.ContentListImage__container:has(.ContentListImage__links > li:nth-child(8) .ContentListImage__link:focus-visible) .sm-menu-image {
  opacity: 0;
}

.ContentListImage__container:has(.ContentListImage__links > li:nth-child(8) .ContentListImage__link:hover) .sm-menu-image--7,
.ContentListImage__container:has(.ContentListImage__links > li:nth-child(8) .ContentListImage__link:focus-visible) .sm-menu-image--7 {
  opacity: 1;
}

.ContentListImage__container:has(.ContentListImage__links > li:nth-child(9) .ContentListImage__link:hover) .sm-menu-image,
.ContentListImage__container:has(.ContentListImage__links > li:nth-child(9) .ContentListImage__link:focus-visible) .sm-menu-image {
  opacity: 0;
}

.ContentListImage__container:has(.ContentListImage__links > li:nth-child(9) .ContentListImage__link:hover) .sm-menu-image--8,
.ContentListImage__container:has(.ContentListImage__links > li:nth-child(9) .ContentListImage__link:focus-visible) .sm-menu-image--8 {
  opacity: 1;
}

.ContentListImage__container:has(.ContentListImage__links > li:nth-child(10) .ContentListImage__link:hover) .sm-menu-image,
.ContentListImage__container:has(.ContentListImage__links > li:nth-child(10) .ContentListImage__link:focus-visible) .sm-menu-image {
  opacity: 0;
}

.ContentListImage__container:has(.ContentListImage__links > li:nth-child(10) .ContentListImage__link:hover) .sm-menu-image--9,
.ContentListImage__container:has(.ContentListImage__links > li:nth-child(10) .ContentListImage__link:focus-visible) .sm-menu-image--9 {
  opacity: 1;
}

.ContentListImage__container:has(.ContentListImage__links > li:nth-child(11) .ContentListImage__link:hover) .sm-menu-image,
.ContentListImage__container:has(.ContentListImage__links > li:nth-child(11) .ContentListImage__link:focus-visible) .sm-menu-image {
  opacity: 0;
}

.ContentListImage__container:has(.ContentListImage__links > li:nth-child(11) .ContentListImage__link:hover) .sm-menu-image--10,
.ContentListImage__container:has(.ContentListImage__links > li:nth-child(11) .ContentListImage__link:focus-visible) .sm-menu-image--10 {
  opacity: 1;
}

.ContentListImage__container:has(.ContentListImage__links > li:nth-child(12) .ContentListImage__link:hover) .sm-menu-image,
.ContentListImage__container:has(.ContentListImage__links > li:nth-child(12) .ContentListImage__link:focus-visible) .sm-menu-image {
  opacity: 0;
}

.ContentListImage__container:has(.ContentListImage__links > li:nth-child(12) .ContentListImage__link:hover) .sm-menu-image--11,
.ContentListImage__container:has(.ContentListImage__links > li:nth-child(12) .ContentListImage__link:focus-visible) .sm-menu-image--11 {
  opacity: 1;
}

.ContentListImage__container:has(.ContentListImage__links > li:nth-child(13) .ContentListImage__link:hover) .sm-menu-image,
.ContentListImage__container:has(.ContentListImage__links > li:nth-child(13) .ContentListImage__link:focus-visible) .sm-menu-image {
  opacity: 0;
}

.ContentListImage__container:has(.ContentListImage__links > li:nth-child(13) .ContentListImage__link:hover) .sm-menu-image--12,
.ContentListImage__container:has(.ContentListImage__links > li:nth-child(13) .ContentListImage__link:focus-visible) .sm-menu-image--12 {
  opacity: 1;
}

.ContentListImage__container:has(.ContentListImage__links > li:nth-child(14) .ContentListImage__link:hover) .sm-menu-image,
.ContentListImage__container:has(.ContentListImage__links > li:nth-child(14) .ContentListImage__link:focus-visible) .sm-menu-image {
  opacity: 0;
}

.ContentListImage__container:has(.ContentListImage__links > li:nth-child(14) .ContentListImage__link:hover) .sm-menu-image--13,
.ContentListImage__container:has(.ContentListImage__links > li:nth-child(14) .ContentListImage__link:focus-visible) .sm-menu-image--13 {
  opacity: 1;
}

.ContentListImage__container:has(.ContentListImage__links > li:nth-child(15) .ContentListImage__link:hover) .sm-menu-image,
.ContentListImage__container:has(.ContentListImage__links > li:nth-child(15) .ContentListImage__link:focus-visible) .sm-menu-image {
  opacity: 0;
}

.ContentListImage__container:has(.ContentListImage__links > li:nth-child(15) .ContentListImage__link:hover) .sm-menu-image--14,
.ContentListImage__container:has(.ContentListImage__links > li:nth-child(15) .ContentListImage__link:focus-visible) .sm-menu-image--14 {
  opacity: 1;
}

.ContentListImage__container:has(.ContentListImage__links > li:nth-child(16) .ContentListImage__link:hover) .sm-menu-image,
.ContentListImage__container:has(.ContentListImage__links > li:nth-child(16) .ContentListImage__link:focus-visible) .sm-menu-image {
  opacity: 0;
}

.ContentListImage__container:has(.ContentListImage__links > li:nth-child(16) .ContentListImage__link:hover) .sm-menu-image--15,
.ContentListImage__container:has(.ContentListImage__links > li:nth-child(16) .ContentListImage__link:focus-visible) .sm-menu-image--15 {
  opacity: 1;
}

.ContentListImage__container:has(.ContentListImage__links > li:nth-child(17) .ContentListImage__link:hover) .sm-menu-image,
.ContentListImage__container:has(.ContentListImage__links > li:nth-child(17) .ContentListImage__link:focus-visible) .sm-menu-image {
  opacity: 0;
}

.ContentListImage__container:has(.ContentListImage__links > li:nth-child(17) .ContentListImage__link:hover) .sm-menu-image--16,
.ContentListImage__container:has(.ContentListImage__links > li:nth-child(17) .ContentListImage__link:focus-visible) .sm-menu-image--16 {
  opacity: 1;
}

.ContentListImage__container:has(.ContentListImage__links > li:nth-child(18) .ContentListImage__link:hover) .sm-menu-image,
.ContentListImage__container:has(.ContentListImage__links > li:nth-child(18) .ContentListImage__link:focus-visible) .sm-menu-image {
  opacity: 0;
}

.ContentListImage__container:has(.ContentListImage__links > li:nth-child(18) .ContentListImage__link:hover) .sm-menu-image--17,
.ContentListImage__container:has(.ContentListImage__links > li:nth-child(18) .ContentListImage__link:focus-visible) .sm-menu-image--17 {
  opacity: 1;
}

.ContentListImage__container:has(.ContentListImage__links > li:nth-child(19) .ContentListImage__link:hover) .sm-menu-image,
.ContentListImage__container:has(.ContentListImage__links > li:nth-child(19) .ContentListImage__link:focus-visible) .sm-menu-image {
  opacity: 0;
}

.ContentListImage__container:has(.ContentListImage__links > li:nth-child(19) .ContentListImage__link:hover) .sm-menu-image--18,
.ContentListImage__container:has(.ContentListImage__links > li:nth-child(19) .ContentListImage__link:focus-visible) .sm-menu-image--18 {
  opacity: 1;
}

.ContentListImage__container:has(.ContentListImage__links > li:nth-child(20) .ContentListImage__link:hover) .sm-menu-image,
.ContentListImage__container:has(.ContentListImage__links > li:nth-child(20) .ContentListImage__link:focus-visible) .sm-menu-image {
  opacity: 0;
}

.ContentListImage__container:has(.ContentListImage__links > li:nth-child(20) .ContentListImage__link:hover) .sm-menu-image--19,
.ContentListImage__container:has(.ContentListImage__links > li:nth-child(20) .ContentListImage__link:focus-visible) .sm-menu-image--19 {
  opacity: 1;
}

.ContentListImage__container:has(.ContentListImage__links > li:nth-child(21) .ContentListImage__link:hover) .sm-menu-image,
.ContentListImage__container:has(.ContentListImage__links > li:nth-child(21) .ContentListImage__link:focus-visible) .sm-menu-image {
  opacity: 0;
}

.ContentListImage__container:has(.ContentListImage__links > li:nth-child(21) .ContentListImage__link:hover) .sm-menu-image--20,
.ContentListImage__container:has(.ContentListImage__links > li:nth-child(21) .ContentListImage__link:focus-visible) .sm-menu-image--20 {
  opacity: 1;
}

.ContentListImage__container:has(.ContentListImage__links > li:nth-child(22) .ContentListImage__link:hover) .sm-menu-image,
.ContentListImage__container:has(.ContentListImage__links > li:nth-child(22) .ContentListImage__link:focus-visible) .sm-menu-image {
  opacity: 0;
}

.ContentListImage__container:has(.ContentListImage__links > li:nth-child(22) .ContentListImage__link:hover) .sm-menu-image--21,
.ContentListImage__container:has(.ContentListImage__links > li:nth-child(22) .ContentListImage__link:focus-visible) .sm-menu-image--21 {
  opacity: 1;
}

.ContentListImage__container:has(.ContentListImage__links > li:nth-child(23) .ContentListImage__link:hover) .sm-menu-image,
.ContentListImage__container:has(.ContentListImage__links > li:nth-child(23) .ContentListImage__link:focus-visible) .sm-menu-image {
  opacity: 0;
}

.ContentListImage__container:has(.ContentListImage__links > li:nth-child(23) .ContentListImage__link:hover) .sm-menu-image--22,
.ContentListImage__container:has(.ContentListImage__links > li:nth-child(23) .ContentListImage__link:focus-visible) .sm-menu-image--22 {
  opacity: 1;
}

.ContentListImage__container:has(.ContentListImage__links > li:nth-child(24) .ContentListImage__link:hover) .sm-menu-image,
.ContentListImage__container:has(.ContentListImage__links > li:nth-child(24) .ContentListImage__link:focus-visible) .sm-menu-image {
  opacity: 0;
}

.ContentListImage__container:has(.ContentListImage__links > li:nth-child(24) .ContentListImage__link:hover) .sm-menu-image--23,
.ContentListImage__container:has(.ContentListImage__links > li:nth-child(24) .ContentListImage__link:focus-visible) .sm-menu-image--23 {
  opacity: 1;
}