[data-ma-id] {
  --ma-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ma-exit-ease: cubic-bezier(0.32, 0, 0.12, 1);
  position: relative;
}
[data-ma-id].ma-trigger {
  height: 100%;
  transition:
    background-color 180ms ease,
    border-color 180ms ease;
}
[data-ma-id][data-ma-state="opening-trigger"].ma-trigger,
[data-ma-id][data-ma-state="returning-trigger"].ma-trigger {
  overflow: hidden;
}
[data-ma-id].ma-trigger.ma-trigger-bg-image {
  background-image: var(--ma-trigger-bg-image);
}
[data-ma-id].ma-trigger.ma-trigger-bg-image-hover:hover {
  background-image: var(--ma-trigger-bg-image-end, var(--ma-trigger-bg-image));
}
[data-ma-id] .ma-preview {
  position: relative;
  z-index: 1;
  transition:
    background-color 180ms ease,
    transform var(--ma-duration-a) var(--ma-exit-ease),
    opacity var(--ma-duration-a) var(--ma-exit-ease);
  will-change: transform, opacity;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
  overflow: hidden;
}
[data-ma-id] .ma-preview .ma-thumbnail {
  position: relative;
  flex: 1;
  order: 1;
  overflow: hidden;
}
[data-ma-id] .ma-preview .ma-details {
  flex: 2;
  order: 2;
  max-width: 100%;
}
[data-ma-id][data-ma-thumbnail-position="right"] .ma-preview .ma-thumbnail {
  order: 2;
}
[data-ma-id][data-ma-thumbnail-position="right"] .ma-preview .ma-details {
  order: 1;
}
[data-ma-id][data-ma-thumbnail-position="none"] .ma-preview .ma-thumbnail {
  display: none;
}
[data-ma-id][data-ma-thumbnail-position="none"] .ma-preview .ma-details {
  min-width: 0;
}
[data-ma-id][data-ma-thumbnail-position="stacked"] .ma-preview {
  flex-direction: column;
}
[data-ma-id][data-ma-thumbnail-position="stacked"] .ma-preview .ma-thumbnail {
  order: 2;
  width: 100%;
  flex: none;
}
[data-ma-id][data-ma-thumbnail-position="stacked"] .ma-preview .ma-details {
  order: 1;
  width: 100%;
  flex: none;
}
[data-ma-id][data-ma-thumbnail-position="stacked"] .ma-preview .ma-details-bottom {
  order: 3;
  width: 100%;
  flex: none;
}
[data-ma-id] .ma-thumbnail-hover {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms ease;
}
[data-ma-id] .ma-preview:hover .ma-thumbnail-hover {
  opacity: 1;
}
[data-ma-id][data-ma-thumbnail-hover-icon="none"] .ma-thumbnail-hover {
  display: none;
}
[data-ma-id] .ma-thumbnail-hover-overlay {
  position: absolute;
  inset: 0;
}
[data-ma-id] .ma-thumbnail-hover-icon {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40%;
  height: 40%;
}
[data-ma-id] .ma-thumbnail-hover-icon svg {
  width: 100%;
  height: 100%;
}
[data-ma-id] .ma-modal {
  position: fixed;
  inset: 0;
  opacity: 0;
  pointer-events: none;
}
[data-ma-id] .ma-stage {
  position: relative;
  z-index: 1;
  width: 100%;
  min-height: 100dvh;
}
[data-ma-id] .ma-article {
  position: relative;
  transform: translateY(100%);
  height: 100dvh;
  transition:
    transform var(--ma-duration-b) var(--ma-ease);
  will-change: transform;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  overflow: auto;
  overscroll-behavior: contain;
}
[data-ma-id] .ma-article.ma-article-bg-image {
  background-image: var(--ma-article-bg-image);
}
[data-ma-id] .ma-article-content-wrap {
  width: 100%;
}
[data-ma-id] .ma-article-content {
  width: 100%;
  transition:
    transform var(--ma-duration-b) ease;
  padding-bottom: 80px;
}
[data-ma-id] .ma-back {
  position: sticky;
  top: 16px;
  left: 0px;
  right: 0px;
  margin: 16px 0 16px -80px;
  z-index: 2;
  grid-column: 1;
  grid-row: 1;
  display: flex;
  /* justify-self: center; */
  justify-content: flex-end;
  width: calc(100% + 160px);
  max-width: 100vw;
  padding: 0 16px;
  pointer-events: none;
}
[data-ma-id] .ma-back button {
  pointer-events: all;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  opacity: 0;
  transition:
    transform var(--ma-duration-b) var(--ma-ease),
    opacity 180ms var(--ma-ease),
    background-color 180ms ease;
}
[data-ma-id][data-ma-transition-style="slideLeft"] .ma-back button  {
  transform: translate(-50vw,0px);
}
[data-ma-id][data-ma-transition-style="slideRight"] .ma-back button   {
  transform: translate(50vw,0px);
}
[data-ma-id][data-ma-transition-style="slideUp"] .ma-back button  {
  transform: translate(0,-25dvh);
}
[data-ma-id][data-ma-transition-style="slideDown"] .ma-back button  {
  transform: translate(0,25dvh);
}
[data-ma-id] .ma-back svg {
  width: 20px;
  height: 20px;
}
[data-ma-id] .ma-article-content-wrap {
  grid-column: 1;
  grid-row: 1;
  width: 100%;
}
[data-ma-id][data-ma-transition-style="fade"][data-ma-state="opening-trigger"] .ma-preview,
[data-ma-id][data-ma-transition-style="fade"][data-ma-state="opening-modal"] .ma-preview,
[data-ma-id][data-ma-transition-style="fade"][data-ma-state="open"] .ma-preview,
[data-ma-id][data-ma-transition-style="fade"][data-ma-state="closing-modal"] .ma-preview,
[data-ma-id][data-ma-transition-style="fade"] .ma-article {
  transform: translateY(0);
}
[data-ma-id][data-ma-transition-style="zoom"][data-ma-state="opening-trigger"] .ma-preview,
[data-ma-id][data-ma-transition-style="zoom"][data-ma-state="opening-modal"] .ma-preview,
[data-ma-id][data-ma-transition-style="zoom"][data-ma-state="open"] .ma-preview,
[data-ma-id][data-ma-transition-style="zoom"][data-ma-state="closing-modal"] .ma-preview,
[data-ma-id][data-ma-transition-style="zoom"] .ma-article-content   {
  transform: scale(0.75);
}
[data-ma-id][data-ma-transition-style="fade"] .ma-article,
[data-ma-id][data-ma-transition-style="zoom"] .ma-article {
  transition:
    transform var(--ma-duration-b) var(--ma-ease),
    opacity var(--ma-duration-a) var(--ma-exit-ease);
  will-change: transform, opacity;
  opacity: 0;
}
[data-ma-id][data-ma-transition-style="zoom"] .ma-article {
  transform: scale(0.5);
}
[data-ma-id][data-ma-transition-style="slideLeft"][data-ma-state="opening-trigger"] .ma-preview,
[data-ma-id][data-ma-transition-style="slideLeft"][data-ma-state="opening-modal"] .ma-preview,
[data-ma-id][data-ma-transition-style="slideLeft"][data-ma-state="open"] .ma-preview,
[data-ma-id][data-ma-transition-style="slideLeft"][data-ma-state="closing-modal"] .ma-preview,
[data-ma-id][data-ma-transition-style="slideLeft"] .ma-article {
  transform: translateX(100%);
}
[data-ma-id][data-ma-transition-style="slideRight"][data-ma-state="opening-trigger"] .ma-preview,
[data-ma-id][data-ma-transition-style="slideRight"][data-ma-state="opening-modal"] .ma-preview,
[data-ma-id][data-ma-transition-style="slideRight"][data-ma-state="open"] .ma-preview,
[data-ma-id][data-ma-transition-style="slideRight"][data-ma-state="closing-modal"] .ma-preview,
[data-ma-id][data-ma-transition-style="slideRight"] .ma-article  {
  transform: translateX(-100%);
}
[data-ma-id][data-ma-transition-style="slideUp"][data-ma-state="opening-trigger"] .ma-preview,
[data-ma-id][data-ma-transition-style="slideUp"][data-ma-state="opening-modal"] .ma-preview,
[data-ma-id][data-ma-transition-style="slideUp"][data-ma-state="open"] .ma-preview,
[data-ma-id][data-ma-transition-style="slideUp"][data-ma-state="closing-modal"] .ma-preview,
[data-ma-id][data-ma-transition-style="slideUp"] .ma-article {
  transform: translateY(100%);
}
[data-ma-id][data-ma-transition-style="slideDown"][data-ma-state="opening-trigger"] .ma-preview,
[data-ma-id][data-ma-transition-style="slideDown"][data-ma-state="opening-modal"] .ma-preview,
[data-ma-id][data-ma-transition-style="slideDown"][data-ma-state="open"] .ma-preview,
[data-ma-id][data-ma-transition-style="slideDown"][data-ma-state="closing-modal"] .ma-preview,
[data-ma-id][data-ma-transition-style="slideDown"] .ma-article {
  transform: translateY(-100%);
}
[data-ma-id][data-ma-transition-style="slideLeft"] .ma-article-content  {
  transform: translateX(20%);
}
[data-ma-id][data-ma-transition-style="slideRight"] .ma-article-content  {
  transform: translateX(-20%);
}
[data-ma-id][data-ma-transition-style="slideUp"] .ma-article-content {
  transform: translateY(50%);
}
[data-ma-id][data-ma-transition-style="slideDown"] .ma-article-content  {
  transform: translateY(-50%);
}
[data-ma-id][data-ma-state="opening-trigger"] .ma-preview,
[data-ma-id][data-ma-state="opening-modal"] .ma-preview,
[data-ma-id][data-ma-state="open"] .ma-preview,
[data-ma-id][data-ma-state="closing-modal"] .ma-preview {
  opacity: 0;
  pointer-events: none;
}
[data-ma-id][data-ma-state="opening-modal"] .ma-modal,
[data-ma-id][data-ma-state="open"] .ma-modal,
[data-ma-id][data-ma-state="closing-modal"] .ma-modal {
  opacity: 1;
  pointer-events: auto;
}
[data-ma-id][data-ma-state="closing-modal"] .ma-article {
  transition:
    transform var(--ma-duration-a) var(--ma-ease);
}
[data-ma-id][data-ma-transition-style="fade"][data-ma-state="closing-modal"] .ma-article,
[data-ma-id][data-ma-transition-style="zoom"][data-ma-state="closing-modal"] .ma-article {
  transition:
    transform var(--ma-duration-a) var(--ma-ease),
    opacity var(--ma-duration-a) var(--ma-exit-ease);
}
[data-ma-id][data-ma-state="opening-modal"] .ma-article,
[data-ma-id][data-ma-state="open"] .ma-article,
[data-ma-id][data-ma-state="opening-modal"] .ma-article-content,
[data-ma-id][data-ma-state="open"] .ma-article-content {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
}
[data-ma-id][data-ma-state="opening-modal"] .ma-back button,
[data-ma-id][data-ma-state="open"] .ma-back button {
  opacity: 1;
  transform: translate(0,0);
}
[data-ma-id][data-ma-state="closing-modal"] .ma-back button {
  opacity: 0;
}