Orange you thirsty?

<article class="card">
	<h2><abbr title="Aren't you">Orange</abbr> you thirsty?</h2>
	<div class="bg">
		<img
			src="img/orange-poly.svg"
			alt="an orange cut in half facing up"
			class="orange-halved"
      eleventy:ignore
		/>
	</div>
</article>

@font-face {
  font-family: Bangers;
  src: url("./Bangers-Regular.ttf");
}

body {
  height: 100dvh;
  margin: 0;

  display: grid;
  place-items: center;
}

.card {
  width: 60%;
  max-width: 520px;
}

h2 {
  margin: 0;
  margin-block-end: 1.25rem;

  text-align: center;

  font-family: "Bangers", cursive;
  font-size: clamp(1rem, 3.52vw + 0.23rem, 2.75rem);
  font-weight: bold;
  letter-spacing: 0.1em;
}

abbr {
  font-size: 1.1em;
  color: orange;
  letter-spacing: 0.25em;
}

.bg {
  display: block;
  width: 100%;
  margin: 0 auto;

  cursor: pointer;
  border-radius: 1rem;
  background: rgba(219, 124, 0, 1);

  transition: background 1.5s;
  overflow: hidden;
}

.bg:hover {
  background: orange url("img/offer-juice.webp");
  background-position: 50% 80%;
  background-size: cover;
  background-size: 100%;
}

.orange-halved {
  width: 100%;
}

.orange-halved:hover {
  animation: spin 1s 1 forwards;
}

@keyframes spin {
  to {
    transform: rotate(720deg);
    opacity: 0;
  }
}