70 lines
2.2 KiB
SCSS
70 lines
2.2 KiB
SCSS
|
.results {
|
||
|
|
@apply container mx-auto mt-3 p-1 grid gap-1 md:gap-1.5 2xl:gap-2 grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 items-start;
|
||
|
|
&:not(.tab-content) {
|
||
|
|
@apply min-h-screen;
|
||
|
|
}
|
||
|
|
|
||
|
|
.card {
|
||
|
|
@apply flex flex-col relative aspect-card rounded overflow-hidden bg-opacity-0 hover:bg-opacity-50; //transition duration-300;
|
||
|
|
transition: opacity 0.5;
|
||
|
|
&-image {
|
||
|
|
@apply relative inset-0 w-full aspect-2/3;
|
||
|
|
img {
|
||
|
|
@apply absolute inset-0 w-full h-full;// bg-opacity-50 opacity-0;
|
||
|
|
&.lazy {
|
||
|
|
@apply opacity-30;// transition-opacity duration-75
|
||
|
|
}
|
||
|
|
&.lazy.loaded {
|
||
|
|
@apply opacity-100;// transition-opacity duration-200;
|
||
|
|
}
|
||
|
|
transition: 1s filter linear;
|
||
|
|
will-change: filter;
|
||
|
|
:hover {
|
||
|
|
filter: blur(2px);
|
||
|
|
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
:hover {
|
||
|
|
.card-overlay {
|
||
|
|
background-color: rgb(0 0 0 / 0.5);
|
||
|
|
}
|
||
|
|
.card-play {
|
||
|
|
opacity: 1;
|
||
|
|
z-index: 1;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
&-title {
|
||
|
|
@apply relative bottom-0 w-full p-1 m-0 bg-black bg-opacity-80 h-auto text-white;
|
||
|
|
a {
|
||
|
|
@apply text-center text-sm font-semibold w-full h-full line-clamp-1 inset-0 flex items-center justify-center;
|
||
|
|
span {
|
||
|
|
@apply text-center line-clamp-1 sm:line-clamp-1;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
&-play {
|
||
|
|
@apply absolute left-1/2 top-1/2 text-primary;
|
||
|
|
opacity: 0;
|
||
|
|
z-index: -10;
|
||
|
|
transition: 0.3s opacity ease;
|
||
|
|
will-change: opacity;
|
||
|
|
transform: translate(-50%, -50%) rotate(0) skewX(0) skewY(0) scaleX(1) scaleY(1);
|
||
|
|
}
|
||
|
|
&-overlay {
|
||
|
|
@apply absolute inset-0 w-full h-full bg-black bg-opacity-10 ;
|
||
|
|
transition: 0.2s background-color ease;
|
||
|
|
will-change: background-color;
|
||
|
|
:hover {
|
||
|
|
filter: blur(2px);
|
||
|
|
}
|
||
|
|
// @apply group-hover:backdrop-blur-[2px] group-hover:bg-opacity-50;
|
||
|
|
// transition: opacity 0.5;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|