.close {
  top: 20px;
  right: 24px;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  padding: 0 0 2px;
  border: 1px solid #dce5e1;
  border-radius: 12px;
  background: #f3f7f5;
  color: var(--ink);
  font: 600 1.45rem/1 "DM Sans", sans-serif;
  box-shadow: 0 5px 15px rgba(16, 46, 42, .08);
  outline: none;
}

.close:hover {
  background: var(--mint);
  border-color: #b9d9cd;
  color: var(--green);
  transform: translateY(-1px);
}

.close:focus-visible {
  border-color: var(--green);
  box-shadow: 0 0 0 3px rgba(8, 126, 104, .2);
}

.close:active {
  transform: translateY(0);
  box-shadow: none;
}

@media (max-width: 720px) {
  .close {
    top: 14px;
    right: 16px;
  }
}