website/assets/scss/layouts/photos.scss

.photos-list {

    .photos-list-title {
	margin-bottom: 1em;
	.fa {
	    margin-right: 10px;
	}
    }

    .photos-list-photos {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-column-gap: 1.2em;
	grid-row-gap: 1.2em;
	justify-content: center;
	&.photos-list-photos-len-1{
	    grid-template-columns:repeat(1,1fr);
	    .photos-list-item{
		width:100%;
		background-size: contain;
		background-position: center;
		background-repeat: no-repeat;
		span#caption{
		    --height:100%;
		    --width:100%;
		}
	    }

	}
	&.photos-list-photos-len-2{
	    grid-template-columns:repeat(2,1fr);
	}
	&.photos-list-photos-len-3{
	    grid-template-columns:repeat(3,1fr);
	}
    }

    .photos-list-item {
	border-radius: 5px;
	height: 17.5em;
	/*min-width: 14em;*/
	width:17.5em;
	background-size: cover;
	background-position: center;
	opacity: 1;
	display: block;
	transition: opacity 0.2s;
	span#caption{
	    display:none;
	    background-color:rgba(27, 27,27, 0.7);
	    color:white;
	    --width:17.5em;
		width: 0;
	    overflow:auto;
	    --height:17.5em;
		height: 0;
		overflow: none;
	    word-wrap:break-word;
	    word-break:break-word;
	    padding:10px;
	    text-decoration:none!important;
	}

    }
    .photos-list-item:hover {
	opacity: 0.8;
	cursor: pointer;
	transition: opacity 0.2s;
	span#caption{
	    display:block;
		width:var(--width);
		height:var(--height);
		overflow: auto;
	}
    }

    .photos-more {
	float: right;
    }
}


@media (max-width: $responsive-medium) {
    .photos-list {
	.photos-list-photos {
	    display: flex;
	    justify-content: center;
	    flex-wrap: wrap;
	}
	/*.photos-list-item {
	    min-width: 17.5em;
	    span#caption{
		width:calc(17.5em - 10px);
	    }
	}*/
    }
}