/*
 * HOJA SEGURA PARA CAMBIOS FUTUROS
 * ---------------------------------
 * Este archivo se carga después del diseño principal.
 * Puede escribir aquí sus modificaciones sin tocar los otros CSS.
 * Si algo sale mal, borre las reglas añadidas y conserve este comentario.
 */

/* EJEMPLO DE PALETA (quite los signos de comentario para activarlo):
:root {
  --ink: #183b42;
  --ink-2: #2d4b50;
  --ink-deep: #0d292d;
  --paper: #f4f0e7;
  --paper-2: #ebe4d6;
  --white: #fffdf8;
  --accent: #d56f43;
  --acid: #d8df9b;
  --reading: min(100ch, 100%);
  --page: min(1600px, calc(100vw - clamp(2.2rem, 8vw, 9rem)));
}
*/

/* Vídeos añadidos al diario */
.video-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1rem, 2vw, 2rem);
  width: 100%;
  margin-top: clamp(2.5rem, 5vw, 5rem);
}

.video-card {
  margin: 0;
  padding: clamp(.45rem, .8vw, .7rem);
  border: 1px solid var(--line);
  background: rgba(255, 253, 250, .82);
}

.video-card video {
  display: block;
  width: 100%;
  height: auto;
  background: var(--ink-deep);
}

.video-card figcaption {
  padding: .75rem .2rem .25rem;
  color: var(--ink-2);
  font: .76rem/1.45 var(--sans);
}

@media (max-width: 720px) {
  .video-grid {
    grid-template-columns: 1fr;
  }
}