/* ====== HOLDS ALL SCREENSHOTS ====== */
.container {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
	gap: 3vmin;
	max-width: 100%;
    margin-block: 2em;

    a {
        text-decoration: none;
	    transition: all 0.3s ease-in-out;

        .description {
            font-size: 0.9rem;
            text-align: center;
            border-radius: 4px;
            transition: 0.3s ease-in-out;
          }
          &:hover > .description {
            color: white;
            background: #5b6db3;
            }

          /* ====== THE IMAGES ====== */
          .screenshot-image {
              max-width: 100%;
              border-radius: 3px;
              box-shadow: 0 2px 10px 0px #bababa;
          }
          .watch-screenshot {
              border-radius: 1.5em;
          }
          }
}