.mmir-wrap { width: 100%; }

.mmir-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:50px;
  align-items:start;
}

@media (max-width:768px){
  .mmir-grid{ grid-template-columns:1fr; }
}

.mmir-col-title{
  text-align:center;
  font-family:'Jost',sans-serif;
  font-size:28px;
  font-weight:500;
  margin:0 0 18px;
  color:#111827;
}

.mmir-btn{
  margin-top:18px;
  width:100%;
  padding:14px 18px;
  border-radius:999px;
  border:0;
  cursor:pointer;
  font-family:'Jost',sans-serif;
  font-size:16px;
  font-weight:500;
  background:#111827;
  color:#fff;
}

.mmir-btn:disabled{ opacity:.6; cursor:not-allowed; }

.mmir-actions{
  text-align:center;
  margin-bottom:18px;
}

.mmir-btn-all{
  width:auto;
  padding:14px 28px;
  border-radius:999px;
  border:0;
  cursor:pointer;
  font-family:'Jost',sans-serif;
  font-size:16px;
  font-weight:500;
  background:#111827;
  color:#fff;
}

.mmir-btn-all:disabled{ opacity:.6; cursor:not-allowed; }


.mmir-error{
  margin-top:10px;
  font-family:'Jost',sans-serif;
  font-size:14px;
  text-align:center;
  color:#991b1b;
  min-height:18px;
}

.mmir-actions{
  text-align:center;
  margin-bottom:30px;
}

.mmir-main-btn{
  padding:14px 32px;
  border-radius:999px;
  border:0;
  cursor:pointer;
  font-family:'Jost',sans-serif;
  font-size:16px;
  font-weight:500;
  background:#111827;
  color:#fff;
}

.mmir-main-btn:disabled{
  opacity:.6;
  cursor:not-allowed;
}



/* Card styles (your original) */
.card{ width:100%; font-family:'Jost',sans-serif; }

.card-inner{
  background-color:#fff;
  border-radius:1rem;
  overflow:hidden;
  box-shadow:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -2px rgba(0,0,0,.05);
}

.card-image-container{ position:relative; aspect-ratio:1 / 1; }

.card-image{ width:100%; height:100%; object-fit:cover; display:block; }

.card-overlay-bar{
	display:flex;
	align-items:center;
	justify-content:center;
	gap:14px;

	background-color:rgba(255,255,255,.8);
	background:linear-gradient(to bottom right,
		rgba(219,234,254,.6),
		rgba(237,233,254,.6),
		rgba(252,231,243,.6)
	);
	backdrop-filter:blur(8px);
	padding:1.4rem 1.5rem 1.6rem 1.5rem;

  box-shadow:
    inset 0 10px 12px -10px rgba(0,0,0,.15),
    inset 0 -10px 12px -10px rgba(0,0,0,.15);
}


.card-title{
	text-align:center;
	color:#111827;
	font-size:22px;
	margin:0;
	font-weight:400;
	line-height:1.1;
}

.card-swirl{
	position:relative;
	display:flex;
	flex:0 0 auto;
	align-items:center;
	justify-content:center;
	width:55px;
}



.card-swirl-image{ width:65px; height:auto; display:block; }

.card-number{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#FFF;
  font-size:20px;
  font-weight:600;
}

.card-content{
  background:linear-gradient(to bottom right,
    rgba(219,234,254,.6),
    rgba(237,233,254,.6),
    rgba(252,231,243,.6)
  );
  padding:20px;
}

.card-text{
  color:#374151;
  text-align:center;
  line-height:1.425;
  margin:0;
	font-size: 17px;
}


/* Mystical draw animations */
.mmir-card .card-inner{
  transition: transform 420ms ease, filter 420ms ease, opacity 420ms ease;
  position: relative;
}

/* Soft “lift” + dim while drawing */
.mmir-col.is-drawing .mmir-card .card-inner{
  transform: translateY(-4px) scale(0.99);
  filter: blur(0.2px) saturate(1.05);
  opacity: 0.88;
}

/* Shimmer overlay */
.mmir-card .card-inner::after{
  content:"";
  position:absolute;
  inset:-30%;
  background: linear-gradient(120deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,0) 35%,
    rgba(255,255,255,0.35) 50%,
    rgba(255,255,255,0) 65%,
    rgba(255,255,255,0) 100%
  );
  transform: translateX(-60%) rotate(12deg);
  opacity: 0;
  pointer-events:none;
}

.mmir-col.is-drawing .mmir-card .card-inner::after{
  opacity: 1;
  animation: mmirShimmer 1400ms ease-in-out infinite;
}

@keyframes mmirShimmer{
  0%   { transform: translateX(-60%) rotate(12deg); }
  100% { transform: translateX(60%)  rotate(12deg); }
}

/* Swirl spin while drawing */
.mmir-col.is-drawing .card-swirl-image{
  animation: mmirSpin 1300ms linear infinite;
  transform-origin: 50% 50%;
}

@keyframes mmirSpin{
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* Text fade a touch while drawing */
.mmir-col.is-drawing .card-title,
.mmir-col.is-drawing .card-text{
  opacity: 0.65;
  transition: opacity 260ms ease;
}