.website-tutorials-cards{display:grid;gap:24px}@media(min-width:550px){.website-tutorials-cards{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(min-width:900px){.website-tutorials-cards{grid-template-columns:repeat(3,minmax(0,1fr))}}.website-tutorials-cards_card{overflow:hidden;border:1px solid var(--color-surface-secondary);border-radius:16px;background:var(--color-surface-secondary)}.website-tutorials-cards_card a{display:flex;flex-direction:column;height:100%;color:var(--color-text-primary);text-decoration:none}.website-tutorials-cards_thumbnail{aspect-ratio:16/9;overflow:hidden}.website-tutorials-cards_thumbnail img{display:block;width:100%;height:100%;object-fit:cover}@media(prefers-reduced-motion:no-preference){.website-tutorials-cards_thumbnail img{transition:transform .2s}.website-tutorials-cards_card a:is(:hover,:focus-visible) .website-tutorials-cards_thumbnail img{transform:scale(1.05)}}.website-tutorials-cards_text{display:flex;flex:1;flex-direction:column;gap:8px;padding:24px}.website-tutorials-cards_title{font-size:16px;font-weight:700;line-height:1.25;transition:color .2s}.website-tutorials-cards_card a:is(:hover,:focus-visible) .website-tutorials-cards_title{color:var(--color-text-brand)}.website-tutorials-cards_summary{color:var(--color-text-secondary);font-size:14px}.website-tutorials-cards-loader{display:grid;gap:24px}@media(min-width:900px){.website-tutorials-cards-loader{grid-template-columns:repeat(3,minmax(0,1fr))}}.website-tutorials-cards-loader_item{overflow:hidden;border:1px solid var(--color-surface-secondary);border-radius:16px;background:var(--color-surface-secondary)}.website-tutorials-cards-loader_thumbnail{aspect-ratio:16/9;background:var(--color-surface-primary)}.website-tutorials-cards-loader_text{display:flex;flex-direction:column;gap:8px;padding:24px}.website-tutorials-cards-loader_summary{display:flex;flex-direction:column;gap:4px}.website-tutorials-article{margin-top:calc(-1 * var(--website-nav-offset));padding-top:calc(var(--website-nav-offset) + 24px);background:linear-gradient(var(--color-surface-orange),var(--color-surface-primary) calc(var(--website-nav-offset) + 192px))}.website-tutorials-article_wrapper{display:flex;flex-direction:column;gap:64px}.website-tutorials-article_breadcrumb ol{display:flex;flex-wrap:wrap;gap:8px;list-style:none;font-size:14px}.website-tutorials-article_breadcrumb ol li+li:before{content:">";margin-right:8px}.website-tutorials-article_breadcrumb ol a{color:inherit;text-decoration:none}.website-tutorials-article_breadcrumb ol a:hover{color:var(--color-text-brand)}.website-tutorials-article_breadcrumb ol [aria-current]{font-weight:700}.website-tutorials-article_content{display:grid;grid-template-areas:"header" "player" "description";align-items:start;gap:32px}@media(min-width:900px){.website-tutorials-article_content{grid-template-areas:"header player" "description player";grid-template-columns:repeat(2,minmax(0,1fr));column-gap:40px}}.website-tutorials-article_header{display:flex;flex-direction:column;grid-area:header}.website-tutorials-article_label{margin-bottom:24px;color:var(--color-text-brand);font-size:14px;font-weight:700;text-transform:uppercase}.website-tutorials-article_title{font-size:36px;font-weight:700;line-height:1.25}@media(min-width:900px){.website-tutorials-article_title{font-size:48px}}.website-tutorials-article_summary{margin-top:16px;font-size:16px;font-weight:700}.website-tutorials-article_description{grid-area:description;font-size:14px;white-space:pre-line}.website-tutorials-article_player{grid-area:player;border-radius:16px}@media(min-width:900px){.website-tutorials-article_player{position:sticky;top:calc(var(--website-nav-offset) + 24px)}}.website-tutorials_content{display:flex;flex-direction:column;gap:64px;padding-bottom:64px;background:var(--color-surface-primary)}@media(min-width:900px){.website-tutorials_content{gap:128px;padding-bottom:128px}}.website-tutorials_list,.website-tutorials_others{display:flex;flex-direction:column;gap:32px}.website-tutorials_empty{color:var(--color-text-secondary)}
