portfolio/src/components/ProjectImage/index.module.css

41 lines
677 B
CSS

.imageWrap {
position: relative;
}
.imageWrap:not(:only-of-type) {
margin-bottom: calc(var(--spacer) * 3);
}
.frame {
border: var(--stroke-width) solid rgba(255, 255, 255, 0.2);
border-radius: var(--border-radius);
overflow: hidden;
transition: border-color 0.1s ease-out;
box-shadow: var(--box-shadow);
will-change: border-color;
}
a:hover .frame,
a:focus .frame {
border-color: var(--link-color);
}
.image {
composes: frame;
display: block;
}
.image:last-of-type {
margin-bottom: 0;
}
@media (min-width: 1200px) {
.image:not(:only-of-type) {
margin-bottom: calc(var(--spacer) * 6);
}
.image:last-of-type {
margin-bottom: 0;
}
}