/* Myrtle Bento Cards (mck-bento): ported from site/services/brand-creative/v1/style.css (.purpose-head / .bento).
   Card widths: bx-w--third = 2 of 6 columns, bx-w--half = 3 of 6, bx-w--full = all 6. */
.mck-bento { --display: "Sunset Serial", Georgia, serif; } /* Elementor containers set --display: flex */
.mck-bento .purpose-head { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 80px); align-items: end; }
.mck-bento .purpose-head .lead { max-width: 52ch; }
.mck-bento .purpose-head .lead + .lead { margin-top: 18px; }
.mck-bento .bento { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; margin-top: clamp(48px, 6vw, 80px); }
.mck-bento .bento .shell { grid-column: span 2; }
.mck-bento .bento .bx-w--half { grid-column: span 3; }
.mck-bento .bento .bx-w--full { grid-column: 1 / -1; }
.mck-bento .bento .core { height: 100%; min-height: 240px; display: flex; flex-direction: column; padding: 32px 30px 34px; overflow: hidden; transition: transform .8s var(--ease); }
.mck-bento .bento .shell:hover .core { transform: translateY(-5px); }
.mck-bento .bx-ic { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 18px; background: var(--mist); margin-bottom: auto; transition: transform .8s var(--spring); }
.mck-bento .bx-ic img { width: 28px; }
.mck-bento .bento .shell:hover .bx-ic { transform: rotate(-10deg) scale(1.08); }
.mck-bento .bento h3 { margin-top: 40px; font-size: clamp(22px, 1.9vw, 28px); font-weight: 300; line-height: 1.12; }
.mck-bento .bento p { margin-top: 10px; font-weight: 300; font-size: 16px; max-width: 36ch; position: relative; z-index: 1; }
.mck-bento .bento .bx--teal .core { background: var(--teal); color: rgba(255, 254, 253, .85); }
.mck-bento .bento .bx--teal h3 { color: var(--white); }
.mck-bento .bento .bx--teal .bx-ic { background: rgba(255, 254, 253, .12); }
.mck-bento .bento .bx--teal .core::after { content: ""; position: absolute; right: -40px; bottom: -40px; width: 200px; height: 160px; background: url("../../shapes/Myrtle-Commerce-Shape-Sprout-Aqua.svg") center / contain no-repeat; opacity: .22; }
.mck-bento .bento .bx--yellow .core { background: var(--yellow-soft); }
.mck-bento .bento .bx--yellow .bx-ic { background: var(--white); }
.mck-bento .bento .bx--pattern .core { background: var(--white); }
.mck-bento .bento .bx--pattern .core::before { content: ""; position: absolute; inset: 0; background: url("../../patterns/Pattern-Line-Black-Tile.svg") 0 0 / 70px 105px repeat; opacity: .05; }
@media (max-width: 1080px) {
  .mck-bento .purpose-head { grid-template-columns: 1fr; }
  .mck-bento .bento { grid-template-columns: 1fr 1fr; }
  .mck-bento .bento .shell, .mck-bento .bento .bx-w--half { grid-column: auto; }
  .mck-bento .bento .shell:nth-child(1), .mck-bento .bento .bx-w--full { grid-column: 1 / -1; }
}
@media (max-width: 767px) {
  .mck-bento .bento { grid-template-columns: 1fr; }
  .mck-bento .bento .core { min-height: 0; }
  .mck-bento .bento h3 { margin-top: 28px; }
}