index-main/assets/css/components/_figures.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);  }
//     }
// }