.hola-var, :root {
  --hola-primary-color: #3498db;
  --hola-text-light-color: rgba(255, 255, 255, 0.97);
  --hola-text-dark-color: rgba(0, 0, 0, 0.8);
  --hola-bg-on-dark: rgba(255, 255, 255, 0.4);
  --hola-backdrop-color: rgba(0, 0, 0, 0.8);

  --hola-focus-color: rgba(52, 152, 219, 0.5);

  --hola-avatar-bg: rgba(255, 255, 255, 0.4);

  --hola-card-padding: 2.5rem;
  --hola-card-gap: 2rem;

  --hola-element-gap: 2rem;

  /*
  --hola-layout-divide: 700px;
  */
  /* We'll need it one day, but today CSS variables is not allowed in media queries.
     For now we're hardcoding 700px in media queries and hope we can use variables
     in MQ one day.
  */
}

@media (max-width: 700px) {
  .hola-var, :root {
    --hola-card-padding: 1.6rem;
    --hola-card-gap: 2.5vw; /* (100vw - 95vw) / 2 */
    --hola-element-gap: 1rem;
  }
}