.content {
  display: flex;
  flex-direction: column;
  gap: var(--Space-x3);
  padding: var(--Space-x1) var(--Space-x3) var(--Space-x4);
  max-height: 70vh;
  overflow-y: auto;
  width: 100%;
}

.header {
  display: flex;
  justify-content: space-between;
  width: 100%;
  padding: var(--Space-x3) var(--Space-x3) var(--Space-x1) var(--Space-x3);
}

.footer {
  display: flex;
  justify-content: space-between;
  width: 100%;
  border-top: 1px solid var(--Base-Border-Subtle);
  padding: var(--Space-x3);
}

.close {
  position: absolute;
  top: var(--Space-x2);
  right: var(--Space-x2);
}

@media screen and (min-width: 768px) {
  .content {
    width: 640px;
    max-width: 100%;
  }
}