/* Professional CSS omitted for brevity? */
:root{
 --page-width:720px;
 --background:#f4f4f4;
 --surface:#fff;
 --text:#222;
 --header:#333;
 --accent:#ff0000;
 --border:#ddd;
 --shadow:0 2px 8px rgba(0,0,0,.15);
 --radius:10px;
 --transition:.25s ease;
}
*,*::before,*::after
    {margin:0;
    padding:0;
    padding-bottom: 20px;
    box-sizing:border-box
    }
.youtube-container
    {display:flex;
    flex-direction:column;
    gap:20px;
    }
.main-youtube
    {width:100%;
    max-width:var(--page-width);
    margin:auto
    }
.video-wrapper
    {position:relative;
    width:100%;
    padding-bottom:56.25%;
    overflow:hidden;
    background:#000;
    border-radius:var(--radius);
    box-shadow:var(--shadow)
    }
.video-wrapper iframe,#player
    {position:absolute;
    top:0;
    left:0;
    width:100%!important;
    height:100%!important
    }
.youtube-list
    {display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:16px;
    width:100%;
    max-width:var(--page-width);
    margin:auto
    }
.youtube-card
    {border:2px solid transparent;
    border-radius:var(--radius);
    overflow:hidden;
    background:var(--surface);
    cursor:pointer;
    text-align:left;
    transition:var(--transition);
    box-shadow:var(--shadow)
    }
.youtube-card:hover
    {transform:translateY(-3px)
    }
.youtube-card:focus-visible
    {outline:3px solid var(--accent);
    outline-offset:3px
    }
.youtube-card.active
    {border-color:var(--accent)
    }
.youtube-card img
    {display:block;
    width:100%;
    height:auto
    }
.youtube-info
    {padding:12px
    }
.youtube-info h2
    {font-size:1rem;
    margin-bottom:6px
    }
.youtube-info p
    {font-size:.9rem;
    color:#666
    }
@media(min-width:600px)
    {.youtube-list
        {grid-template-columns:repeat(4,1fr)
        }
    }
@media(min-width:1024px)
    {.youtube-container
        {flex-direction:row;
        justify-content:center;
        align-items:flex-start;
        gap:24px
        }
    .main-video
        {flex:0 0 var(--page-width);
        margin:0
        }
    .youtube-list
        {width:420px;
        max-width:420px;
        margin:0;
        margin-right: 60px;
        grid-template-columns:repeat(2,1fr)
        }
    }