/* Apresentação de .motion-introduction h2 */
.motion-introduction h2 {
font-size:clamp(30px,4vw,55px)
}

/* Apresentação de .motion-introduction */
.motion-introduction {
margin-bottom:35px
}

/* Apresentação de .motion-introduction>p:last-child */
.motion-introduction>p:last-child {
color:#bbb
}

/* Apresentação de .motion-grid */
.motion-grid {
display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:35px 24px
}

/* Apresentação de .motion-card */
.motion-card {
display:block;border:0;padding:0;background:none;color:#fff;text-align:left;cursor:pointer;min-width:0
}

/* Apresentação de .motion-cover */
.motion-cover {
display:block;position:relative;overflow:hidden;background:#161616;aspect-ratio:16/10;border-radius:6px
}

/* Apresentação de .motion-cover img */
.motion-cover img {
width:100%;height:100%;object-fit:contain;transition:transform .3s
}

/* Apresentação de .motion-card:hover img */
.motion-card:hover img {
transform:scale(1.035)
}

/* Apresentação de .motion-play */
.motion-play {
position:absolute;right:14px;bottom:14px;display:grid;place-items:center;width:44px;height:44px;background:#e6e600;color:#000;border-radius:50%;font-size:17px
}

/* Apresentação de .motion-caption */
.motion-caption {
display:flex;flex-direction:column;gap:8px;padding-top:16px
}

/* Apresentação de .motion-caption strong */
.motion-caption strong {
font-size:20px;font-weight:500
}

/* Apresentação de .motion-caption small */
.motion-caption small {
font-size:12px;color:#aaa
}

/* Apresentação de .motion-more */
.motion-more {
display:block;margin:40px auto 0
}

/* Apresentação de .motion-dialog */
.motion-dialog {
background:#101010;color:#fff;border:1px solid #444;border-radius:12px;padding:22px;width:min(1050px,94vw);max-height:92dvh;overflow:auto
}

/* Apresentação de .motion-dialog::backdrop */
.motion-dialog::backdrop {
background:#000d;backdrop-filter:blur(7px)
}

/* Apresentação de .motion-dialog-head */
.motion-dialog-head {
display:flex;justify-content:space-between;gap:20px;align-items:center;margin-bottom:18px
}

/* Apresentação de .motion-dialog-head h2 */
.motion-dialog-head h2 {
font-size:clamp(22px,3vw,34px);margin:0
}

/* Apresentação de .motion-dialog-head .eyebrow */
.motion-dialog-head .eyebrow {
font-size:9px;margin-bottom:8px
}

/* Apresentação de .motion-close */
.motion-close {
border:1px solid #555;border-radius:30px;background:#191919;color:white;padding:10px 16px;cursor:pointer;white-space:nowrap
}

/* Apresentação de .motion-dialog video */
.motion-dialog video {
display:block;width:100%;max-height:58dvh;background:#000
}

/* Apresentação de .motion-dialog-foot */
.motion-dialog-foot {
margin-top:18px
}

/* Apresentação de .motion-dialog select */
.motion-dialog select {
max-width:600px;background:#222
}

/* Apresentação de .motion-error:empty */
.motion-error:empty {
display:none
}

/* Apresentação de .video-is-open */
.video-is-open {
overflow:hidden
}

/* Regra responsiva / animação */
@media(max-width:900px) {

/* Apresentação de .motion-grid */
.motion-grid {
grid-template-columns:repeat(2,minmax(0,1fr))
}

}

/* Regra responsiva / animação */
@media(max-width:560px) {

/* Apresentação de .motion-grid */
.motion-grid {
grid-template-columns:1fr
}

/* Apresentação de .motion-dialog */
.motion-dialog {
padding:15px
}

/* Apresentação de .motion-dialog-head */
.motion-dialog-head {
align-items:start
}

/* Apresentação de .motion-close */
.motion-close {
font-size:12px;padding:8px 12px
}

}

/* Regra responsiva / animação */
@media(prefers-reduced-motion:reduce) {

/* Apresentação de .motion-cover img */
.motion-cover img {
transition:none
}

}

/* Apresentação de #design-panel:not([hidden]) + #motion-panel:not([hidden]) */
#design-panel:not([hidden]) + #motion-panel:not([hidden]) {
margin-top:60px
}

/* Apresentação de .motion-grid */
.motion-grid {
display:block;columns:280px 3;column-gap:24px
}

/* Apresentação de .motion-card */
.motion-card {
display:inline-block;width:100%;break-inside:avoid;vertical-align:top;margin-bottom:32px
}

/* Apresentação de .motion-cover */
.motion-cover {
aspect-ratio:auto
}

/* Apresentação de .motion-cover img */
.motion-cover img {
display:block;width:100%;height:auto
}

/* Apresentação de .motion-card:hover img */
.motion-card:hover img {
transform:none
}

/* Regra responsiva / animação */
@media(max-width:600px) {

/* Apresentação de .motion-grid */
.motion-grid {
columns:1
}

}

/* Apresentação de .motion-dialog-foot */
.motion-dialog-foot {
padding-top:22px;border-top:1px solid #ffffff14
}

/* Apresentação de .motion-dialog-foot>label */
.motion-dialog-foot>label {
font-size:11px;text-transform:uppercase;letter-spacing:.14em;color:#aaa;margin-bottom:12px
}

/* Apresentação de .video-formats */
.video-formats {
display:grid;grid-template-columns:repeat(auto-fit,minmax(145px,1fr));gap:10px
}

/* Apresentação de .video-format */
.video-format {
display:flex;flex-direction:column;gap:7px;text-align:left;padding:15px 17px;border:1px solid #ffffff26;border-radius:10px;background:#1a1a1a;color:#fff;cursor:pointer;transition:background .2s,border-color .2s
}

/* Apresentação de .video-format strong */
.video-format strong {
font-size:16px;font-weight:500;letter-spacing:.02em
}

/* Apresentação de .video-format span */
.video-format span {
font-size:11px;color:#aaa
}

/* Apresentação de .video-format:hover */
.video-format:hover {
background:#252525;border-color:#777
}

/* Apresentação de .video-format[aria-pressed=true] */
.video-format[aria-pressed=true] {
background:#e6e600;color:#000;border-color:#e6e600
}

/* Apresentação de .video-format[aria-pressed=true] span */
.video-format[aria-pressed=true] span {
color:#333
}

/* Apresentação de .video-format:focus-visible */
.video-format:focus-visible {
outline:2px solid white;outline-offset:3px
}

/* Regra responsiva / animação */
@media(max-width:420px) {

/* Apresentação de .video-formats */
.video-formats {
grid-template-columns:repeat(2,minmax(0,1fr))
}

/* Apresentação de .video-format */
.video-format {
padding:12px
}

/* Apresentação de .video-format strong */
.video-format strong {
font-size:14px
}

}