@use "sass/utilities/mixins" as mx;

.bd-screenshots {
  display: grid;
  grid-gap: var(--bulma-block-spacing);
  grid-template-columns: 1fr;

  .bd-screenshot {
    position: relative;

    &:hover {
      box-shadow: 0 1em 1em rgba(black, 0.1);
      transform: translateY(-0.5em);
    }
  }
}

@include mx.tablet {
  .bd-screenshots {
    grid-template-columns: repeat(auto-fill, minmax(336px, 1fr));
    margin: 0 auto;
    max-width: var(--container-width);
  }
}