/* Malta 360 — intent tiles. Figma 228:4233: 427 | 427 | 426 × 750 in the 1280 column, no padding. */

.m360-intent { padding-block: 0; }

.m360-intent__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}

.m360-intent__tile {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: 1 / 1;
  background: var(--m360-bg);
  color: var(--m360-white);
  text-decoration: none;
}

/* Photo at 40% over black, desaturated. */
.m360-intent__img {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .4;
  filter: grayscale(1);
  transition: transform .6s var(--m360-ease), opacity .4s var(--m360-ease);
}

.m360-intent__tile:hover .m360-intent__img { transform: scale(1.03); opacity: .5; }

.m360-intent__shape { z-index: 1; }

/* Invest: #2A3FBF ellipse — inset −10% −9.77% 74.08% 49.9%. */
.m360-intent__shape--1 { top: -10%; right: -9.77%; bottom: 74.08%; left: 49.9%; border-radius: 287.39px; }
/* Connect: #4D9D5D triangle — inset −20% 40.12% 78.09% −9.98%. */
.m360-intent__shape--2 { top: -20%; right: 40.12%; bottom: 78.09%; left: -9.98%; }
/* Live: #E65F34 ellipse — inset 74% −10% −10% 50%. */
.m360-intent__shape--3 { top: 74%; right: -10%; bottom: -10%; left: 50%; border-radius: 288px; }

.m360-intent__body {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  height: 100%;
  padding: 48px;
}

.m360-intent__num {
  padding-bottom: 16px;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: 5.6px;
  text-transform: uppercase;
  color: var(--accent, var(--m360-sky));
}

.m360-intent__label {
  padding-bottom: 16px;
  font-family: var(--m360-font-display);
  font-weight: 400;
  font-size: clamp(44px, 5vw, 72px);
  line-height: 1;
  letter-spacing: -.0667em;
  text-transform: uppercase;
  color: var(--m360-text);
}

.m360-intent__blurb {
  min-height: 56px;
  font-size: 16px;
  line-height: 26px;
  color: var(--m360-white);
}

@media (min-width: 641px) {
  .m360-intent__tile { aspect-ratio: 16 / 9; }
}

@media (min-width: 1025px) {
  .m360-intent__row { grid-template-columns: 427fr 427fr 426fr; }
  .m360-intent__tile { aspect-ratio: auto; height: 750px; }
  .m360-intent__tile:not(:last-child) { border-right: 1px solid rgba(255, 255, 255, .05); }
}

@media (max-width: 640px) {
  .m360-intent__body { padding: 32px; }
}

/* Figma mobile 228:4499: 327×500 tiles stacked, 40/48 labels. */
@media (max-width: 640px) {
  .m360-intent__tile { aspect-ratio: auto; height: 500px; }
  .m360-intent__body { padding: 48px; }
  .m360-intent__label { font-size: 40px; line-height: 48px; letter-spacing: -2.4px; }
}