@use 'design-system' as *;

.videoSection {
    display: flex;
    flex-direction: column;
    gap: $spacing-size-4;
    margin-bottom: $spacing-size-4;

    @media screen and (min-width: $breakpoint-docs-home-small) {
        flex-direction: row;
        align-items: flex-start;
    }
}

.header p:first-child {
    font-size: var(--text-fs-lg);
}

.ytContainer {
    position: relative;

    &::before {
        content: '';
        position: absolute;
        margin: auto;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        width: 24px;
        height: 24px;
        background-color: white; // Set the background color to white
        z-index: 0; // Ensures the background is behind the SVG
    }
}

svg.ytIcon {
    margin: auto;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 75px;
    height: 75px;
    fill: #e62117;
}

.ytThumbnail {
    display: block;
    aspect-ratio: 16/9;
    border-radius: var(--radius-md);
    border: 2px solid var(--color-border-secondary);
    object-fit: cover;
    width: 100%;

    @media screen and (min-width: $breakpoint-docs-home-small) {
        min-width: $spacing-size-64;
        max-width: 16rem;
    }
}
