@charset "UTF-8";
/* CSS Document */

.links{ display: grid; gap: 0 6%; grid-template-columns: repeat(3,1fr);}
.links li{ margin: 1.0rem 0 0 0;}

.docs{ display: grid; gap: 0 3%; grid-template-columns: repeat(2,1fr);}
.docs article{ display: grid; grid-template-columns: 33% 1fr;  gap: 0 2%; margin: 1.0em 0 0 0; background: #f0f0f0; padding: 1.0em;}
.docs article *{ margin-top: 0;}
.docs .figure{ display: block;}
.docs figure{ display: block; padding: 100% 0 0 0; background: #fff no-repeat center center / contain;; border-radius: 0.5rem;}
.docs h3{ line-height: 1.5; color: #0073bc; font-weight: bold;}
.docs .langs{ display: grid; grid-template-columns: repeat(2,1fr); gap: 0 1.0rem;}
.docs .langs li{ margin: 0.5em 0 0 0;}
.docs .langs img{ display: block;}

@media screen and ( max-width: 480px ) {
  .docs{ grid-template-columns: 1fr;}
  .docs article{ grid-template-columns: 100px 1fr;}
  .links{ grid-template-columns: 1fr 1fr;}
}