.document-container {
	display: grid;
	grid-gap: 24px;
	grid-template-columns: repeat(5, 1fr);
	align-items: center;
}

.document-item {
	max-width: 390px;
	margin: 0 auto 40px auto;
	text-align: center;
}

.document-item a {
	display: block;
}

.document-item img {
	margin-bottom: 10px;
	border-radius: 10px;
	box-shadow:10px 10px 0 #ccc;
    transform:translate(-4.5px, -4.5px);
    transition:box-shadow 0.3s, transform 0.3s;
}

.document-item:hover img {
	box-shadow:1px 1px 0 #ccc;
	transform:initial;
}

.document-item span {
  display: inline-block;
  position: relative;
  transition: .3s;
}

.document-item span:after {
  position: absolute;
  bottom: -5px;
  left: 0;
  content: '';
  width: 0;
  height: 1px;
  background-color: #333;
  transition: .3s;
}

.document-item:hover span:after {
  width: 100%;
}

@media screen and (max-width: 1023px) {
	.document-container {
		grid-template-columns: 1fr;
	}

	.document-item span {
		font-size: 1.75rem;
	}
}