.tutorial-hero-custom{width:100%;overflow:hidden}.tutorial-hero-custom .page-width{max-width:1400px;margin:0 auto;padding:0 20px}.tutorial-hero__wrapper{display:grid;gap:var(--content-gap, 60px);align-items:center}.tutorial-hero__wrapper--left{grid-template-columns:var(--content-width, 45%) var(--image-width, 55%)}.tutorial-hero__wrapper--right{grid-template-columns:var(--image-width, 55%) var(--content-width, 45%)}.tutorial-hero__wrapper--right .tutorial-hero__content{order:2}.tutorial-hero__wrapper--right .tutorial-hero__media{order:1}.tutorial-hero__content{display:flex;flex-direction:column}.tutorial-hero__title{font-size:var(--title-font-size, 48px);color:var(--title-color, #ffffff);font-weight:700;line-height:1.1;margin:0;letter-spacing:-.02em}.tutorial-hero__description{font-size:var(--description-font-size, 16px);color:var(--description-color, #cccccc);line-height:1.6;margin:0}.tutorial-hero__description p{margin:0 0 1em}.tutorial-hero__description p:last-child{margin-bottom:0}.tutorial-hero__badge-wrapper{display:flex}.tutorial-hero__badge{display:inline-flex;align-items:center;gap:8px;background-color:var(--badge-bg-color, rgba(255, 255, 255, .15));color:var(--badge-text-color, #ffffff);font-size:var(--badge-font-size, 12px);font-weight:500;text-transform:uppercase;letter-spacing:.5px;border-radius:20px;padding:8px 20px;transition:all .3s ease}.tutorial-hero__badge:hover{transform:translateY(-2px);box-shadow:0 4px 12px #00000026}.tutorial-hero__badge-icon{width:16px;height:16px;fill:currentColor}.tutorial-hero__steps{display:flex;flex-direction:column;gap:16px}.tutorial-hero__step{display:flex;align-items:flex-start;gap:16px}.tutorial-hero__step-number{flex-shrink:0;font-size:var(--step-font-size, 16px);color:var(--step-number-color, #ffffff);font-weight:700;width:24px;height:24px;display:flex;align-items:center;justify-content:center}.tutorial-hero__step-text{font-size:var(--step-font-size, 16px);color:var(--step-text-color, #cccccc);line-height:1.5;padding-top:2px}.tutorial-hero__media{position:relative;width:100%}.tutorial-hero__media-wrapper{position:relative;width:100%;border-radius:var(--image-border-radius, 16px);overflow:hidden;box-shadow:0 8px 24px #0000004d;transition:transform .3s ease,box-shadow .3s ease}.tutorial-hero__media-wrapper:hover{transform:translateY(-4px);box-shadow:0 12px 32px #0006}.tutorial-hero__thumbnail{position:relative;width:100%;padding-bottom:56.25%;overflow:hidden;transition:opacity .3s ease}.tutorial-hero__image{position:absolute;top:0;left:0;width:100%;height:100%;display:block;object-fit:cover}.tutorial-hero__video-player{position:relative;width:100%;padding-bottom:56.25%;background:#000;overflow:hidden}.tutorial-hero__video{position:absolute;top:0;left:0;width:100%;height:100%;display:block;object-fit:cover}.tutorial-hero__video-iframe-wrapper{position:absolute;top:0;left:0;width:100%;height:100%;overflow:hidden}.tutorial-hero__video-iframe{position:absolute;top:0;left:0;width:100%;height:100%;border:none}.tutorial-hero__play-button{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:var(--play-button-size, 80px);height:var(--play-button-size, 80px);background-color:var(--play-button-bg, rgba(103, 88, 164, .9));border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .3s cubic-bezier(.4,0,.2,1);z-index:2;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:none;padding:0;outline:none}.tutorial-hero__play-button:focus-visible{outline:2px solid rgba(103,88,164,.5);outline-offset:4px}.tutorial-hero__play-button:hover{transform:translate(-50%,-50%) scale(1.1);background-color:#6758a4;box-shadow:0 8px 24px #6758a466}.tutorial-hero__play-button:active{transform:translate(-50%,-50%) scale(.95)}.tutorial-hero__play-icon{width:40%;height:40%;fill:var(--play-button-icon, #ffffff);margin-left:4px}@media screen and (max-width: 989px){.tutorial-hero__wrapper--left,.tutorial-hero__wrapper--right{grid-template-columns:1fr;gap:40px}.tutorial-hero__wrapper--right .tutorial-hero__content{order:1}.tutorial-hero__wrapper--right .tutorial-hero__media{order:2}.tutorial-hero__title{font-size:calc(var(--title-font-size, 48px) * .75)}.tutorial-hero__description{font-size:calc(var(--description-font-size, 16px) * .95)}.tutorial-hero__play-button{width:calc(var(--play-button-size, 80px) * .85);height:calc(var(--play-button-size, 80px) * .85)}}@media screen and (max-width: 749px){.tutorial-hero-custom .page-width{padding:0 16px}.tutorial-hero__wrapper{gap:32px}.tutorial-hero__title{font-size:calc(var(--title-font-size, 48px) * .6)}.tutorial-hero__description{font-size:calc(var(--description-font-size, 16px) * .9)}.tutorial-hero__badge{font-size:calc(var(--badge-font-size, 12px) * .95);padding:6px 16px}.tutorial-hero__steps,.tutorial-hero__step{gap:12px}.tutorial-hero__step-number{width:20px;height:20px;font-size:calc(var(--step-font-size, 16px) * .9)}.tutorial-hero__step-text{font-size:calc(var(--step-font-size, 16px) * .9)}.tutorial-hero__play-button{width:calc(var(--play-button-size, 80px) * .75);height:calc(var(--play-button-size, 80px) * .75)}.tutorial-hero__video-modal-content{width:95%;margin:10% auto}.tutorial-hero__video-modal-close{top:-35px;font-size:28px}}@keyframes fadeInUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.tutorial-hero__title{animation:fadeInUp .6s ease-out}.tutorial-hero__description{animation:fadeInUp .6s ease-out .1s backwards}.tutorial-hero__badge{animation:fadeInUp .6s ease-out .2s backwards}.tutorial-hero__steps{animation:fadeInUp .6s ease-out .3s backwards}.tutorial-hero__media{animation:fadeInUp .6s ease-out .2s backwards}.tutorial-hero__image.placeholder-svg{width:100%;height:auto;min-height:400px;background:linear-gradient(135deg,#667eea,#764ba2);display:flex;align-items:center;justify-content:center}
/*# sourceMappingURL=/cdn/shop/t/6/assets/tutorial-hero-custom.css.map */