.pic-container {
color: $color-major; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: flex-start; margin: 1rem 0 0 1rem; padding: 0 1rem;
}
.pic {
margin: 1rem 2rem 0 0; &:hover { .pic-overlay { display: block; } }
}
.pic-overlay {
background-color: rgba(170, 170, 170, 0.5); color: #ffffff; display: none; font-size: 1.2rem; font-weight: bold; height: 22rem; line-height: 22rem; position: absolute; text-align: center; width: 22rem; z-index: 999;
}
.pic-holder {
background-size: cover; background-position: center center; background-repeat: no-repeat; height: 22rem; width: 22rem;
}
.pic-title {
font-size: 1.4rem; padding: 1rem 0 0; text-align: left;
}
.pic-desc {
color: $color-minor; font-size: 1rem; padding: .4rem 0; text-align: left;
}
.pic-seperator {
display: none;
}
@media (max-width: 78rem) {
.pic-overlay { line-height: 30rem; width: 30rem; height: 30rem; } .pic-holder { width: 30rem; height: 30rem; }
}
@media (max-width: 42rem) {
.pic-container { display: block; margin: 0 auto; padding: 0 0 0 1rem; text-align: center; width: 100%; } .pic { width: 100%; margin: 0 0 1rem; padding: 0 1rem; } .pic-title { text-align: center; } .pic-desc { text-align: center; } .pic-overlay { height: 42rem; line-height: 42rem; width: 100%; } .pic-holder { height: 42rem; width: 100%; } .pic-seperator { display: block; padding-bottom: 1rem; } .pic:last-child .pic-seperator { display: none; }
}