styles.css

:root {
  --textColor: #4b332e;
  --hoverColor: #aa6443;
  --backgroundColor: #f5b793;
  --ctaColor: #ffffea;
}

body {
  font-family: "Montserrat", sans-serif;
  background-color: var(--backgroundColor);
  touch-action: none;
}
main {
  background-image: url("images/img.jpg");
  max-width: 600px;
  height: 75vh;
  background-repeat: no-repeat;
  background-size: cover;
  margin: 0 auto;
}

h1,
.cta {
  letter-spacing: 0.03em;
}

h1 {
  color: var(--textColor);
  text-align: center;
  font-weight: 500;
  margin: 1.2em;
}
.grid {
  display: grid;
  gap: 2em;
  padding: 4em;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 200px);
  transform-origin: top left;
}
.grid img {
  max-width: 100%;
}

.grid .hotspot {
  background-color: rgba(255, 255, 242, 0.1);
  cursor: pointer;
}

button {
  font-family: "Montserrat", sans-serif;
  cursor: pointer;
}

a {
  text-decoration: none;
  color: var(--textColor);
  font-size: 1.2em;
}
a {
  font-weight: normal;
}

.cta {
  background: var(--ctaColor);
  position: absolute;
  top: 78%;
  left: 46%;
  border: 1px solid var(--textColor);
  padding: 1em 3em;
  margin: 0 auto;
}

.pointer {
  color: var(--textColor);
  position: absolute;
  left: 40%;
  top: 33%;
  stroke-width: 1px;
}
svg.lucide {
  width: 40px;
  height: 40px;
}
footer {
  display: flex;
  justify-content: center;
}
footer svg {
  transition: color 0.5s ease-in-out;
}
footer svg.lucide {
  color: var(--textColor);
  margin-top: 4em;
  margin-left: 0.7em;
  margin-bottom: 1em;
  width: 2.5em;
  height: 2.5em;
  stroke-width: 1.3px;
}
footer svg.lucide:hover {
  color: var(--hoverColor);
}
footer a {
  text-decoration: none;
}