.my-tutorial-section{max-width:1200px;margin:2rem auto;padding:0 1.5rem}.my-tutorial-header{text-align:center;margin-bottom:3rem}.my-tutorial-header h1{font-size:2.5rem;color:var(--my-text-color);color:#fff;margin-bottom:1rem}.my-tutorial-header p{font-size:1.1rem;color:#fff;line-height:1.6}.my-grid-container{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:1.5rem;justify-content:center}.my-card{background:#fff;border-radius:12px;padding:1.25rem;transition:all .3s cubic-bezier(.4,0,.2,1);position:relative;overflow:hidden;border:1px solid #e2e8f0;text-decoration:none;display:block}.my-card::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:var(--my-primary-color);transform:scaleX(0);transition:transform .3s ease}.my-card:hover{transform:translateY(-5px);box-shadow:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -4px rgba(0,0,0,.1)}.my-card:hover::before{transform:scaleX(1)}.my-card-content{display:flex;justify-content:space-between;align-items:center}.my-card h3{font-size:1.1rem;color:var(--my-text-color);margin:0;font-weight:600;line-height:1.4}.my-card-arrow{display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:8px;background:#ffd166;transition:all .3s ease;flex-shrink:0}.my-arrow-icon{color:var(--my-primary-color);font-size:1.4rem;transition:transform .3s ease}.my-card:hover .my-card-arrow{background:var(--my-primary-color)}.my-card:hover .my-arrow-icon{color:white;transform:translateX(2px)}@media (max-width:768px){.my-grid-container{grid-template-columns:1fr}.my-tutorial-header h1{font-size:2rem}}