:root{--gutter: 16px;--container-width: calc(100% - (var(--gutter) * 2));--header-top-height: 96px;--header-left-width: 280px}h4{color:#000;font-size:24px;font-family:Inter,Arial,sans-serif;font-style:normal;font-weight:600;line-height:135%}@media screen and (max-width:768px){h4{display:none}}.subtitle{color:#000;font-size:14px;font-family:Inter;font-style:normal;font-weight:400;line-height:150%}.examples{display:flex;flex-wrap:wrap;flex:0 0 auto;padding-bottom:48px}.examples h2{color:#000;font-size:20px;font-family:Inter,Arial,sans-serif;font-style:normal;font-weight:600;line-height:135%;width:100%}.examples h2 .fa-solid{margin-left:14px;font-size:14px;vertical-align:middle}.examples p{color:#000;font-size:14px;font-family:Inter;font-style:normal;font-weight:400;line-height:150%}.examples .items{columns:2;column-gap:12px;margin-top:24px;width:100%}.examples .items .item{position:relative;display:block;width:100%;border-radius:8px;overflow:hidden;text-decoration:none;cursor:pointer;break-inside:avoid;margin-bottom:12px}.examples .items .item .thumb-video{display:block;width:100%;height:auto;border-radius:8px}.examples .items .item .overlay{position:absolute;inset:0;display:grid;grid-template-rows:1fr auto;align-items:end;pointer-events:none;opacity:1}.examples .items .item .overlay:before{display:none}.examples .items .item .overlay .title{position:absolute;bottom:10px;left:10px;right:10px;padding:0}.examples .items .item .overlay .title .title-text{color:#000;font-size:16px;font-family:Inter,Arial,sans-serif;font-style:normal;font-weight:600;line-height:150%;color:#fff;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-shadow:0 1px 4px rgba(0,0,0,.6)}.examples .items .item .overlay .actions{display:none}@media screen and (min-width:768px){.examples .items{columns:3}.examples .items .item .overlay{opacity:0;transition:opacity .18s ease-in-out}.examples .items .item .overlay:before{content:"";display:block;position:absolute;inset:0;background:linear-gradient(180deg,#00000059,#00000080,#000000a6);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}.examples .items .item .overlay .title{position:absolute;inset:50% auto auto 50%;transform:translate(-50%,-50%);max-width:92%;padding:10px 14px;border-radius:10px}.examples .items .item .overlay .title .title-text{color:#000;font-size:24px;font-family:Inter,Arial,sans-serif;font-style:normal;font-weight:600;line-height:135%;color:#fff;text-align:center;text-shadow:0 1px 2px rgba(0,0,0,.35)}.examples .items .item .overlay .actions{display:flex;position:relative;justify-content:center;padding:16px 12px 24px}.examples .items .item .overlay .actions .gen-btn{position:relative;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:10px;min-width:180px;max-width:80%;padding:10px 14px;border-radius:10px;pointer-events:none}.examples .items .item .overlay .actions .gen-btn:before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,#ffffff14,#ffffff05);border:1px solid rgba(255,255,255,.16);border-radius:inherit}.examples .items .item .overlay .actions .gen-btn i{font-size:16px;line-height:1;color:#fff}.examples .items .item .overlay .actions .gen-btn .btn-text{color:#000;font-size:16px;font-family:Inter,Arial,sans-serif;font-style:normal;font-weight:600;line-height:150%;color:#fff;text-align:center;white-space:nowrap}.examples .items .item .overlay .actions .gen-btn .btn-spacer{width:16px;height:16px}.examples .items .item:hover .overlay,.examples .items .item:focus-visible .overlay{opacity:1}}@media screen and (min-width:1440px){.examples .items{columns:4}}