64 lines
No EOL
1.2 KiB
SCSS
64 lines
No EOL
1.2 KiB
SCSS
|
|
@mixin figure-16-9{
|
|
& > picture,
|
|
& > figure{
|
|
aspect-ratio: 16/9;
|
|
display: flex;
|
|
overflow: hidden;
|
|
img{
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
transition: cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.5s;
|
|
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
|
|
@mixin figure-3-1(){
|
|
& > picture,
|
|
& > figure{
|
|
aspect-ratio: 3/1;
|
|
overflow: hidden;
|
|
img{
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
|
|
// @mixin figure-2-1(){
|
|
// & > picture,
|
|
// & > figure{
|
|
// aspect-ratio: 2/1;
|
|
// overflow: hidden;
|
|
// img{
|
|
// width: 100%;
|
|
// height: 100%;
|
|
// object-fit: cover;
|
|
// }
|
|
// }
|
|
// }
|
|
|
|
// @mixin figure-16-9-hover{
|
|
// figure{
|
|
// aspect-ratio: 16/9;
|
|
// display: flex;
|
|
// overflow: hidden;
|
|
// img{
|
|
// width: 100%;
|
|
// height: 100%;
|
|
// object-fit: cover;
|
|
// transition: cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.5s;
|
|
|
|
// }
|
|
// }
|
|
// &:hover{
|
|
// figure img{ transform: scale(1.05); }
|
|
// }
|
|
// } |