65 lines
No EOL
1 KiB
SCSS
65 lines
No EOL
1 KiB
SCSS
|
|
@mixin figure-16-9{
|
|
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(){
|
|
& > figure{
|
|
aspect-ratio: 3/1;
|
|
overflow: hidden;
|
|
img{
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
|
|
@mixin figure-2-1(){
|
|
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); }
|
|
}
|
|
} |