.product-block {
    position: relative; padding: 65px 100px; display: block; width: 100%; max-width: 920px; height: 531px; border-left: 1px solid #00E96C; transition: transform 0.3s ease-in-out; overflow: hidden;
}

.product-block img {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity 0.3s ease-in-out; z-index: -1;
}

.product-block .img1 { opacity: 1; }
.product-block .img2 { opacity: 0; }

.product-block:hover .img1 { opacity: 0; }
.product-block:hover .img2 { opacity: 1; }

.product-block h2 {
    font-family: 'Graphie Bold', sans-serif; white-space: nowrap; font-size: 60px; font-style: normal; line-height: normal; letter-spacing: 12px; text-transform: uppercase; color: #00E96C; margin-bottom: 24px;
}

.product-block p {
    font-family: 'Graphie Light', sans-serif; font-size: 18px; font-style: normal; font-weight: 300; line-height: 125%; color: #FFF; max-width: 350px;
}

.product-block a {
    display: table; font-family: 'Graphie Bold', sans-serif; font-size: 24px; line-height: 61px; white-space: nowrap; background: linear-gradient(90deg, #00E96C 0%, #8BFF5B 100%); color: #161F2D; padding: 0 40px; text-decoration: none; position: absolute; left: 0; bottom: 0; transition: background 1s ease; overflow: hidden; z-index: 1;
}

.product-block a::before {
    content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(90deg, #0094FF 0%, #00EB6C 100%); z-index: -1; opacity: 0; transition: opacity 1s ease;
}

.product-block a:hover::before { opacity: 1; }
.product-block a:hover { text-decoration: none; }

.product-block.right { border-left: 0; border-right: 1px solid #00E96C; float: right; }
.product-block.right a { right: 0; left: auto; }
.product-block.right .txt { float: right; }

.product-block.blue { border-color: #24C1FF; }
.product-block.blue h2 { color: #24C1FF; }
.product-block.blue a { background: linear-gradient(90deg, #00A1E1 0%, #69E0F5 100%); }