.overlay {
  --width: 42rem;

  position: relative;
  z-index: var(--z-top);
}

.overlay::part(panel) {
  background: var(--color-secondary);
  border: var(--border);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.overlay::part(body) {

}

.overlay::part(footer) {
  padding: 0;
}

.overlay .content {
  margin-block-start: var(--step-0);
}

.overlay .image {
  object-fit: contain;
}

.overlay .text {
  margin-block-start: var(--step-1);
}

.overlay .close {
  border-top: var(--border);
  display: flex;
}

.overlay sl-button::part(base) {
  padding-inline: 0;
}

.overlay .close .label {
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.overlay .close::part(label) {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-inline-start: 0;
  padding-inline-end: var(--step--3);
}

.overlay .close .label::before {
  content: '';
  display: inline-block;
  height: 1.3em;
  vertical-align: middle;
}

@media (min-width: 38rem) {
  .overlay::part(body) {

  }
}