/* ===========================================================================
   1) Core Grid & Box Layout
   =========================================================================== */
.mycobreaks-wrap {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: stretch;
  gap: 48px 32px;
  margin: 0 auto 32px;
  width: 100%;
}

.mycobreaks-cols-1 .mycobreak-box { flex: 1 1 96vw;               max-width: 96vw; }
.mycobreaks-cols-2 .mycobreak-box { flex: 1 1 calc(50% - 32px);     max-width: calc(50% - 32px); }
.mycobreaks-cols-3 .mycobreak-box { flex: 1 1 calc(33.333% - 32px); max-width: calc(33.333% - 32px); }
/* add .mycobreaks-cols-4/.5/.6 as needed */

.mycobreak-box {
  position: relative;
  box-sizing: border-box;
  background: transparent;
  border-radius: 18px;
  overflow: visible;          /* allow glow outwards */
  transition: transform 0.3s ease, filter 0.2s ease;
}

@media (max-width: 900px) {
  .mycobreaks-wrap { gap: 24px 12px; }
  .mycobreak-box  { flex-basis: 96vw; max-width: 96vw; }
}
@media (max-width: 600px) {
  .mycobreaks-wrap { gap: 16px 8px; }
  .mycobreak-box  { flex-basis: 96vw; max-width: 96vw; }
}

/* ===========================================================================
   2) Images, Captions & Perks Banner
   =========================================================================== */
.mycobreak-img {
  display: block;
  width: 100%;
  max-width: 320px;
  height: auto;
  border-radius: 10px;
  margin-bottom: 8px;
  position: relative;  /* above the border-image */
  z-index: 2;
}

.mycobreak-caption {
  font-size: 1.12em;
  margin: 0 0 4px;
  color: #ceffd6;
  text-align: center;
  position: relative;
  z-index: 2;
}

.mycobreaks-perks-banner {
  background: linear-gradient(90deg,#0a2c24,#461a59,#0b3a26);
  color: #ffe459;
  border-radius: 14px;
  padding: 18px;
  font-size: 1.2em;
  margin: 24px 0;
  box-shadow: 0 0 16px #ae6cf0a8;
  text-align: center;
  font-weight: bold;
  letter-spacing: 0.08em;
  position: relative;
  z-index: 2;
}

/* ===========================================================================
   3) TRUE Neon Rainbow Outline + Faster, Brighter Hue Cycle
   =========================================================================== */
/*  — spin the gradient ring — */
@keyframes border-spin {
  to { --deg: 360deg; }
}
/*  — continuously cycle the hue — */
@keyframes hue-cycle {
  from {
    filter: blur(3px) brightness(1.8) saturate(2.5) hue-rotate(0deg);
  }
  to {
    filter: blur(3px) brightness(1.8) saturate(2.5) hue-rotate(360deg);
  }
}

.mbc-rainbow-border .mycobreak-img {
  border: 6px solid transparent !important;
  border-radius: 10px !important;

  /* draw & spin the rainbow ring */
  --deg: 0deg;
  border-image-source:
    conic-gradient(
      from var(--deg),
      #ff4ecd,
      #4eafff,
      #53ff4e,
      #fff94e,
      #ff4ecd
    ) !important;
  border-image-slice: 1 !important;

  /* faster spin + faster hue cycle */
  animation:
    border-spin 2s linear infinite,
    hue-cycle   6s linear infinite;

  position: relative;
  z-index: 2;
  overflow: visible;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.mbc-rainbow-border:hover .mycobreak-img {
  /* speed up even more on hover */
  animation-duration: 0.6s,  3s;
  transform: scale(1.06);
  /* brighter, stronger neon glow */
  box-shadow:
    0 0 16px 4px #ff4ecd,
    0 0 12px 6px #4eafff,
    0 0 14px 8px #53ff4e;
}