.tut-info{margin-top:clamp(2.25rem,4.5vw,3.75rem)}.tut-info>h2{margin-top:0}.tut-info__link a,.tut-info__link strong{font-weight:700}#tutorialboxes{display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:1fr;gap:clamp(1rem,2.2vw,1.75rem);padding:clamp(1rem,3vw,2.25rem);margin:0 auto;max-width:1320px;box-sizing:border-box;background:radial-gradient(80% 60% at 50% 0%,rgba(45,108,223,.06),transparent 70%),linear-gradient(180deg,#f7faff,#eef3fb);border-radius:var(--m-radius-lg, 22px);border:1px solid rgba(var(--m-brand-rgb),.06);text-align:left;clear:both;overflow:visible;justify-items:center}#tutorialboxes a{display:grid;grid-template-rows:auto auto 1fr;gap:.7rem;padding:1rem 1rem 1.1rem;width:100%;max-width:420px;min-width:0;box-sizing:border-box;background:#fff;border:1px solid rgba(var(--m-brand-rgb),.08);border-radius:16px;box-shadow:var(--m-shadow-sm, 0 6px 16px -10px rgba(16, 26, 44, .18));text-decoration:none;color:inherit;transition:transform .24s var(--m-ease, cubic-bezier(.22, 1, .36, 1)),box-shadow .24s var(--m-ease, cubic-bezier(.22, 1, .36, 1)),border-color .24s var(--m-ease, cubic-bezier(.22, 1, .36, 1))}@media(max-width:1000px){#tutorialboxes{grid-template-columns:repeat(2,1fr)}}@media(max-width:560px){#tutorialboxes{grid-template-columns:1fr}}@media(min-width:560px){#tutorialboxes a{max-width:none}}#tutorialboxes a:hover{transform:translateY(-3px);border-color:rgba(var(--m-brand-rgb),.18);box-shadow:var(--m-shadow-md, 0 18px 40px -22px rgba(16, 26, 44, .22))}#tutorialboxes a:focus-visible{outline:2px solid var(--m-brand-500, #2d6cdf);outline-offset:3px}#tutorialboxes .tuttitle{display:flex;flex-direction:column;justify-content:flex-start;margin:0;padding:0;color:var(--m-brand-600, #1f4e80);font-weight:600;font-size:clamp(1.05rem,1.15vw + .7rem,1.25rem);line-height:1.3;letter-spacing:.005em;min-height:calc(3.75em + .15rem);background:transparent;text-align:left;word-break:break-word;transition:color .22s var(--m-ease, cubic-bezier(.22, 1, .36, 1))}#tutorialboxes .tuttitle .tutsubtitle{display:inline-block;font-weight:400;font-size:.9em;line-height:1.25;color:var(--m-text-500, #62708a);margin-top:.15rem}#tutorialboxes a:hover .tuttitle{color:#c4660e}#tutorialboxes a figure,#tutorialboxes a .image-wrap,#tutorialboxes a picture{display:block;margin:0}#tutorialboxes a img{display:block;width:100%;height:auto;aspect-ratio:3 / 2;object-fit:cover;border-radius:4px;border:1px solid rgba(var(--m-brand-rgb),.08);background:#f3f6fb;transition:transform .4s var(--m-ease, cubic-bezier(.22, 1, .36, 1))}#tutorialboxes a:hover img{transform:scale(1.02)}#tutorialboxes .tutcontent{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:5;line-clamp:5;overflow:hidden;color:var(--m-text-700, #364255);font-size:.92rem;line-height:1.55;text-align:left;margin:0;padding:0;height:7.75em;min-height:7.75em;align-self:stretch;word-break:break-word}#tutorialboxes a.notutorial{pointer-events:none;cursor:default;opacity:.5}@media(prefers-reduced-motion:reduce){#tutorialboxes a{animation:none;transition:border-color .2s ease,box-shadow .2s ease}#tutorialboxes a:hover,#tutorialboxes a:hover img{transform:none}}@media print{#tutorialboxes{display:block;background:none;box-shadow:none;padding:0}#tutorialboxes a{display:inline-block;width:30%;max-width:200px;animation:none;box-shadow:none;border:1px solid #ddd}}
