<div class="wrapper">
        <div class="text-move">
            <div id="tm01" class="text-move01 marquee__content flex">
                <ul id="marquee-content1" class="flex list-inline">
                    <li>HOVER CARD</li>
                    <li>HOVER CARD</li>
                    <li>HOVER CARD</li>
                    <li>HOVER CARD</li>
                    <li>HOVER CARD</li>
                </ul>
            </div>
        </div>

        <!-- HOVER CARD -->
        <div class="hover-card">
            <div class="cursor flex flex-ai-c flex-jc-c"><span>VIEW<br>ITEM</span></div>

            <div class="card-wrapper flex flex-jc-sa flex-ai-c">
                <div class="hover-img">
                    <a href="">
                        <img src="https://github.com/ViktoriiaZaichuk/hover-card-effect/blob/main/assets/img/img01.jpg?raw=true" alt="Image">
                    </a>
                </div>
                <div class="hover-img">
                    <a href="">
                        <img src="https://github.com/ViktoriiaZaichuk/hover-card-effect/blob/main/assets/img/img02.jpg?raw=true" alt="Image">
                    </a>
                </div>
                <div class="hover-img">
                    <a href="">
                        <img src="https://github.com/ViktoriiaZaichuk/hover-card-effect/blob/main/assets/img/img03.jpg?raw=true" alt="Image">
                    </a>
                </div>
            </div>
        </div>
    </div>

/* MIXINS RESPONSIVE */
$screen768: 768px;


@mixin screen768 {
  @media (max-width: #{$screen768}) {
    @content;
  }
}



/* Base reset */
* {
    margin: 0;
    padding: 0;
}

*,
*::before,
*::after {
    box-sizing: inherit;
}
  
html {
    box-sizing: border-box;
    font-size: 62.5%;
    scroll-behavior: smooth;
}

body {
    font-size: 1.6rem;
    background-color: black;
    font-family: 'Kanit', sans-serif;
    cursor: none;
}

a, a:visited, a:hover {
    text-decoration: none;
    cursor: none;
}

li {
    list-style: none;
    color: white;
}



/* FLEXBOX */
.flex {
    display: flex; 

    &-jc-sb {
      justify-content: space-between;
    }

    &-jc-c {
      justify-content: center;
    }

    &-jc-sa {
      justify-content: space-around;
    }
    
    &-ai-c {
      align-items: center;
    }

    
    &-fd-c {
        flex-direction: column;
    }

}


.wrapper {
  min-height: 100vh;
}


/* TEXT ANIMATION */
.text-move {
    width: 100%;
    overflow: hidden;
    position: relative;
    font-size: 2.5rem;
    padding: 1rem 0;
    border-top: solid white .1rem;
    border-bottom: solid white .1rem;
    @include screen768 {
        font-size: 2rem;
    }
    & .marquee__content {
        overflow: hidden;
    }
    & ul {
        padding: 1rem 0;
        & li {
          -webkit-text-stroke: 1px white;
          color: transparent;
          @include screen768 {
            font-size: 2rem;
        }
        }
  }
}

.list-inline {
  justify-content: space-around;
  width: 33.33%;
} 

.text-move01 {
  width: 300%;
  animation: marquee 40s linear infinite forwards;
  @include screen768 {
      width: 800%;
  }
}

@keyframes marquee {
  0% { 
      transform: translateX(0); 
  }
  100% { 
      transform: translateX(-36.6%); 
  }
}


.hover-card {
    position: relative;
}

.card-wrapper {
    min-height: calc(100vh - 7rem);
    @include screen768 {
        flex-direction: column;
	}
}

.hover-img  {
    margin: 1rem;
	width: 300px;
	height: 400px;
    overflow: hidden;
	@include screen768 {
		width: 250px;
		height: 330px;
        margin: 3rem 0;
	}
	& img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: all .3s;
        &:hover {
            transform: scale(1.25);
            -webkit-filter: grayscale(100%);
            -moz-filter: grayscale(100%);
            -ms-filter: grayscale(100%);
            -o-filter: grayscale(100%);
             filter: grayscale(100%);
        }
    }
}






/* CURSOR */
.cursor {
    width: 3rem;
    height: 3rem;
    border: solid white .2rem;
    border-radius: 50%;
    overflow: hidden;
    position: absolute;
    transform: translate(-40%, -240%);
    pointer-events: none;
    z-index: 10;
    transition: all .3s ease;
    transition-property: background, width, height;
    & span {
        visibility: hidden;
        font-size: 1.5rem;
        font-weight: 550;
        line-height: 1.6;
        color: black;
        display: inline-block;
    }
}

.link-grow {
    width: 9rem;
    height: 9rem;
    background: white;
    transform: translate(-40%, -140%);
    & span {
        visibility: visible;
        color: black;
        transform: scale(1);
    }
}

/* TEXT ANIMATION */
const tm01 = document.getElementById("marquee-content1");
document.getElementById("tm01").appendChild(tm01.cloneNode(true));
document.getElementById("tm01").appendChild(tm01.cloneNode(true));



/* CURSOR */
let mouseCursor = document.querySelector('.cursor');
let hoverLinks = document.querySelectorAll('.hover-img');

window.addEventListener('mousemove', cursor);

function cursor(e) {
    mouseCursor.style.top = e.pageY + 'px';
    mouseCursor.style.left = e.pageX + 'px';
};

hoverLinks.forEach(link => {
    link.addEventListener('mouseleave', () => {
        mouseCursor.classList.remove('link-grow');
    });
    link.addEventListener('mouseover', () => {
        mouseCursor.classList.add('link-grow');
    });
});