:root {
  /* Colors */
  --color: #000;
  --bg-color: #f9f9f9;
  --hover-bg-color: #e9e9e9;
  --primary-color: #fc4c02;
  --secondary-color: #f68727;
  --muted-color: #999;
  --link-color: #17f;
  --code-color: var(--primary-color);
  --code-bg-color: #fff;
  

  /* Borders and corners */
  --border-color: #000;
  --border-color-light: #ccc; /* Used for inline content  */

  --border-radius: 6px;
  --border-radius-large: 8px;
  --border-radius-xl: 12px;

  /* Layout *//*
  --page-width: 56rem;*/

  /* Breakpoints */
  --sm-screen: 720px;
}

/* Base
 * *----------------------------------------------- */
* {
  box-sizing: border-box;
}


@media (min-width: 800px) {
  body {
    padding: 0;
  }
}

.example-image-link {

  display: inline-block;
 
  background-color: var(--bg-color);
  border-radius: var(--border-radius-large);
}
.example-image-link:hover {
  background-color: var(--hover-bg-color);
}

.example-image {
  height: 7rem;
  border-radius: var(--border-radius);
}