/* Malta 360 — 08 exhibit. Figma 228:4238: white, pt 191 pb 192, column 896, gap 48. */

.m360-exhibit { padding-block: 191px 192px; }

.m360-exhibit .m360-container { max-width: calc(896px + 2 * var(--m360-gutter)); }
.m360-exhibit .m360-section-head { gap: 48px; }
.m360-exhibit .m360-eyebrow { color: var(--m360-cobalt); }
.m360-exhibit .m360-display { color: #000; }

/* 12px gradient bar along the top edge. */
.m360-exhibit__bar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 12px;
  background: linear-gradient(90deg, var(--m360-lime), var(--m360-royal) 50%, var(--m360-tangerine));
}

.m360-exhibit__lede {
  max-width: 640px;
  margin: 48px auto 0;
  text-align: center;
  font-size: clamp(17px, 1.4vw, 20px);
  line-height: 1.625;
  color: #4A4A4A;
}

.m360-exhibit__legend {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px 40px;
  padding: 0;
  list-style: none;
}

.m360-exhibit__legend-item {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  color: #000;
}

.m360-exhibit__legend-item::before {
  content: "";
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--dot, var(--m360-lime));
}

.m360-exhibit__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 32px;
  margin-top: 80px;
}

.m360-exhibit .m360-btn--ghost-dark { border-color: var(--m360-ink); color: var(--m360-ink); }

/* Positions on the 1440 white section (unrotated box, centred on Figma's bbox). */
.m360-exhibit__ribbon   { right: calc(-52 * var(--u));     top: calc(-25.48 * var(--u)); width: calc(218.787 * var(--u)); height: calc(230.112 * var(--u)); }
.m360-exhibit__six      { right: calc(-104.01 * var(--u)); top: calc(186.91 * var(--u)); width: calc(275.54 * var(--u));  height: calc(361.08 * var(--u)); }
.m360-exhibit__block    { left: calc(-157.32 * var(--u));  top: calc(421.55 * var(--u)); width: calc(376.532 * var(--u)); height: calc(467.285 * var(--u)); }
.m360-exhibit__triangle { left: calc(-15.47 * var(--u));   top: calc(311.32 * var(--u)); width: calc(233.658 * var(--u)); height: calc(273.856 * var(--u)); }

@media (max-width: 1024px) {
  .m360-exhibit { padding-block: 120px; }
  .m360-exhibit__actions { margin-top: 48px; gap: 16px; }
}

@media (max-width: 640px) {
  .m360-exhibit__actions { flex-direction: column; align-items: stretch; }
}

/* Figma mobile 228:4582: px 24, py 96, gap 32; legend stacked; buttons full width, 32 apart.
   Shapes: ribbon + "6" top-right, blue block bottom-left at −43.34°. */
@media (max-width: 640px) {
  .m360-exhibit { padding-block: 96px; }
  .m360-exhibit .m360-section-head { gap: 32px; }
  .m360-exhibit .m360-exhibit__legend { margin-top: 32px !important; flex-direction: column; align-items: center; gap: 16px; }
  .m360-exhibit__lede { margin-top: 32px; }
  .m360-exhibit__actions { margin-top: 64px; flex-direction: column; align-items: stretch; gap: 32px; }
  .m360-exhibit__ribbon   { right: -183.1px; top: -42.35px; width: 218.787px; height: 230.112px; }
  .m360-exhibit__six      { right: -246px;   top: 59.04px;  width: 275.54px;  height: 361.08px; }
  .m360-exhibit__block    { --r: -43.34deg !important; left: -106.33px; top: auto; bottom: -261.2px; width: 376.532px; height: 467.285px; }
  .m360-exhibit__triangle { display: none; }
}