:root{
  --primary-color:#008AE6;
  --light-primary-color:#E6F4FF;
  --secondary-color:#005999;
  --dark-color:#31333A;
  --light-color:#FFFFFF;
  --grey-color:#BBC7D4;
  --light-grey-color:#f5f5f5;
  --body-font:'Inter', sans-serif;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--light-grey-color);
  font-family: var(--body-font);
  color: var(--dark-color);
}

/* HEADER */
.video-header{
  text-align:center;
  padding:40px 20px;
  background:var(--light-primary-color);
  border-bottom:1px solid var(--grey-color);
}

.video-header h1{
  margin:0;
  font-size:2rem;
  color:var(--primary-color);
}

.video-header .sub{
  margin-top:8px;
  color:var(--secondary-color);
}

/* VIDEO GRID */
.video-container{
  width:95%;
  max-width:1400px;
  margin:40px auto;
}

.video-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(320px, 1fr));
  gap:25px;
}

.video-card{
  background:var(--light-color);
  padding:15px;
  border-radius:10px;
  box-shadow:0 6px 18px rgba(0,0,0,0.08);
  transition:0.3s;
}

.video-card:hover{
  transform:translateY(-4px);
}

.video-card iframe{
  width:100%;
  height:200px;
  border:none;
  border-radius:8px;
}

.video-card h3{
  font-size:1rem;
  margin-top:10px;
  color:var(--primary-color);
}