.primary-area {
    width: 100%;
    height: 100%;
    transition: opacity .25s ease-in-out;
    z-index: -1;
}
.grid-product-card-image-wrapper {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 150%;
}
.grid-product-card-image {
    width: 100%;
    margin: 0 auto;
    opacity: 1;
}
.grid-product-card-image img {
    max-width: 100%;
}
.grid-product-card-image:not(:first-child) {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
}
/* 
 .grid-product-card-image-wrapper {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 150%;
}
 .grid-product-card-image {
    width: 100%;
    margin: 0 auto;
    opacity: 1;
}
 .grid-product-card-image img {
    width: 100%;
}
 .grid-product-card-image:not(:first-child) {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
} */
/* .grid-product-card-image-wrapper:hover .cycle-image:not(:first-child) {
    animation-name: fade-slides-6;
    animation-duration: 14s;
    animation-iteration-count: infinite;
} */

 .parent-2-slides:hover .cycle-image:not(:first-child) {
    animation-name: fade-slides-2;
    animation-duration: 4s;
    animation-iteration-count: infinite;
}
 .parent-3-slides:hover .cycle-image:not(:first-child) {
    animation-name: fade-slides-3;
    animation-duration: 6s;
    animation-iteration-count: infinite;
}
 .parent-4-slides:hover .cycle-image:not(:first-child) {
    animation-name: fade-slides-4;
    animation-duration: 8s;
    animation-iteration-count: infinite;
}
 .parent-5-slides:hover .cycle-image:not(:first-child) {
    animation-name: fade-slides-5;
    animation-duration: 10s;
    animation-iteration-count: infinite;
}
 .parent-6-slides:hover .cycle-image:not(:first-child) {
    animation-name: fade-slides-6;
    animation-duration: 12s;
    animation-iteration-count: infinite;
}
 .parent-7-slides:hover .cycle-image:not(:first-child) {
    animation-name: fade-slides-7;
    animation-duration: 14s;
    animation-iteration-count: infinite;
}
 .parent-8-slides:hover .cycle-image:not(:first-child) {
    animation-name: fade-slides-8;
    animation-duration: 16s;
    animation-iteration-count: infinite;
}
 .grid-product-card-image-wrapper:hover .cycle-image-2 {
    animation-delay: 2s;
}
 .grid-product-card-image-wrapper:hover .cycle-image-3 {
    animation-delay: 4s;
}
 .grid-product-card-image-wrapper:hover .cycle-image-4 {
    animation-delay: 6s;
}
 .grid-product-card-image-wrapper:hover .cycle-image-5 {
    animation-delay: 8s;
}
 .grid-product-card-image-wrapper:hover .cycle-image-6 {
    animation-delay: 10s;
}
 .grid-product-card-image-wrapper:hover .cycle-image-7 {
    animation-delay: 12s;
}
 .grid-product-card-image-wrapper:hover .cycle-image-8 {
    animation-delay: 14s;
}

@keyframes fade-slides-2{
    0%{opacity:0}
    25%{opacity:1}
    50%{opacity:1}
    75%{opacity:0}
    to{opacity:0}
}
@keyframes fade-slides-3{
    0%{opacity:0}
    16.66667%{opacity:1}
    33.33333%{opacity:1}
    50%{opacity:0}
    to{opacity:0}
}
@keyframes fade-slides-4{
    0%{opacity:0}
    12.5%{opacity:1}
    25%{opacity:1}
    37.5%{opacity:0}
    to{opacity:0}
}
@keyframes fade-slides-5{
    0%{opacity:0}
    10%{opacity:1}
    20%{opacity:1}
    30%{opacity:0}
    to{opacity:0}
}
@keyframes fade-slides-6{
    0%{opacity:0}
    8.33333%{opacity:1}
    16.66667%{opacity:1}
    25%{opacity:0}
    to{opacity:0}
}

@keyframes fade-slides-7{
    0%{opacity:0}
    7.142857%{opacity:1}
    14.285714%{opacity:1}
    21.428571%{opacity:0}
    to{opacity:0}
}
@keyframes fade-slides-8{
    0%{opacity:0}
    2.25%{opacity:1}
    12.5%{opacity:1}
    18.75%{opacity:0}
    to{opacity:0}
}