How to Create Social Feed Frame Break Animations -HEB

.ai-content{
max-width:750px;
margin:60px auto;
color:#ddd;
font-size:18px;
line-height:1.6;
padding:0 20px;
direction:rtl;
text-align:start;
}

.ai-tools{
display:flex;
flex-direction:column;
gap:20px;
max-width:700px;
margin:40px auto;
padding:0 20px;
align-items:flex-start;
direction:rtl;
}

.tool-card{
background:#111;
padding:18px 24px;
border-radius:12px;
color:#eee;
width:100%;
text-align:start;
}

.ai-step{
max-width:750px;
margin:60px auto;
padding:0 20px;
direction:rtl;
text-align:start;
}

.ai-step h3{
color:#fff;
font-size:24px;
margin-bottom:10px;
}

.ai-step p{
color:#ddd;
font-size:17px;
line-height:1.6;
}

.step-card img{
max-width:260px;
width:100%;
display:block;
margin:20px auto;
border-radius:12px;
}

.ai-result{
margin:80px auto;
color:#fff;
display:flex;
flex-direction:column;
align-items:center;
direction:rtl;
}

.ai-result h2{
color:#fff;
margin-bottom:20px;
}

.ai-link{
color:#c084fc;
text-decoration:underline;
}

.video-vertical{
width:260px;
aspect-ratio:9/16;
border-radius:20px;
overflow:hidden;
box-shadow:0 20px 60px rgba(0,0,0,0.6);
}

.video-vertical iframe{
width:100%;
height:100%;
border:0;
}