@import url('base.css');
@import url('project-page.css');

.spider-blueprint-prototype {
    width: min(500px, 70%);
    padding-block: 1rem;
    margin: 0rem auto;
}

.gif-container {
  display: grid;
  grid-template-columns: repeat(1, 1fr); /* 3 equal columns */
  gap: 16px; /* space between images */
  margin-block: 1rem;
}

.gif-container img {
  width: 100%; /* makes image fill the column */
  height: auto;
  display: block;
}

@media screen and (min-width: 768px)
{ 
  .gif-container {
    grid-template-columns: repeat(3, 1fr);
  }
}