.banner {
	background: #fff;
	cursor: pointer;
	transition: .15s ease-in-out;
}

.banner.chrome-extension:hover {
	background: linear-gradient(97.26deg, #ed3cca .49%, #df34d2 14.88%, #d02bd9 29.27%, #bf22e1 43.14%, #ae1ae8 57.02%, #9a10f0 70.89%, #8306f7 84.76%, #7c1af8 99.15%), linear-gradient(rgba(0, 0, 0, .05), rgba(0, 0, 0, .05));
}

.banner.chrome-extension span {
	background: linear-gradient(97.26deg, #ed3cca .49%, #df34d2 14.88%, #d02bd9 29.27%, #bf22e1 43.14%, #ae1ae8 57.02%, #9a10f0 70.89%, #8306f7 84.76%, #7c1af8 99.15%), linear-gradient(rgba(0, 0, 0, .05), rgba(0, 0, 0, .05));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: bold;
}

.banner.chrome-extension:hover span {
	color: #fff;
	background: transparent;
    -webkit-background-clip: inherit;
    -webkit-text-fill-color: inherit;
	
}

.banner.chrome-extension:hover .chrome-logo {
	display: none;
}

.banner.chrome-extension .chrome-logo {
	background: url(/public/assets/img/chrome.svg) no-repeat 102% 10px;
    position: absolute;
    height: 100%;
    width: 100%;
	border-radius: var(--bs-alert-border-radius);
}

@media (max-width: 400px) {
	.banner.chrome-extension .chrome-logo {
		display: none;
	}
}