.video-cta-section {
background-color: var(--color-bg-primary);
padding: var(--spacing-section) 0;
}
.video-cta-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--spacing-2xl);
align-items: center;
} .video-cta-heading {
font-family: var(--font-primary);
font-size: var(--font-size-3xl);
font-weight: var(--font-weight-bold);
color: var(--color-text-primary);
line-height: var(--line-height-tight);
margin: 0 0 var(--spacing-md) 0;
}
.video-cta-subtitle {
font-family: var(--font-primary);
font-size: var(--font-size-md);
font-weight: var(--font-weight-regular);
color: var(--color-text-muted);
line-height: var(--line-height-normal);
margin: 0;
} .video-cta-player {
position: relative;
width: 100%;
}
.video-cta-thumb {
position: relative;
cursor: pointer;
overflow: hidden;
aspect-ratio: 16 / 9;
}
.video-cta-thumb img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
} .video-cta-play {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 80px;
height: 80px;
background-color: var(--color-accent);
border-radius: var(--radius-full);
display: flex;
align-items: center;
justify-content: center;
transition: background-color var(--transition-base);
} .video-cta-play::after {
content: '';
display: block;
width: 0;
height: 0;
border-style: solid;
border-width: 14px 0 14px 24px;
border-color: transparent transparent transparent #ffffff;
margin-left: 4px;
}
.video-cta-thumb:hover .video-cta-play,
.video-cta-thumb:focus .video-cta-play {
background-color: var(--color-accent-hover);
}
.video-cta-thumb:focus {
outline: 2px solid var(--color-accent);
outline-offset: 2px;
} .video-cta-iframe {
width: 100%;
aspect-ratio: 16 / 9;
display: block;
} @media (max-width: 768px) {
.video-cta-grid {
grid-template-columns: 1fr;
gap: var(--spacing-xl);
}
.video-cta-heading {
font-size: var(--font-size-2xl);
}
.video-cta-play {
width: 60px;
height: 60px;
}
.video-cta-play::after {
border-width: 10px 0 10px 18px;
margin-left: 3px;
}
}