.no-data-extraction {
  display: flex;
  flex-direction: column;
  gap: var(--space-large);
  margin-inline: auto;
  padding-left: var(--space-medium);
  padding-right: var(--space-medium);
  position: relative;
  width: min(100%, 28em);
  z-index: 1;
}

.no-data-extraction__block {
  display: flex;
  flex-direction: column;
  text-align: center;
}

.no-data-extraction__block header {
  border-radius: 0.5em 0.5em 0 0;
  display: flex;
  flex-direction: column;
  margin-left: 1em;
  margin-right: 1em;
  padding: 0.35em 0.5em 0.25em 0.5em;
}

.no-data-extraction__block header h3 {
  color: var(--color-white);
  font-size: var(--font-size-small);
  font-weight: 500;
}

.no-data-extraction__block figure {
  overflow: hidden;
}

.no-data-extraction__block footer {
  align-items: center;
  background: rgba(var(--rgb-white), 0.5);
  border: 2px dashed var(--color-blurple);
  border-radius: 0.8em;
  display: none;
  flex: 1;
  justify-content: center;
  margin-top: 1em;
}

.no-data-extraction__block footer p {
  color: var(--color-blurple);
  font-size: var(--font-size-x-small);
  font-weight: 500;
}

.no-data-extraction__block--gmail header {
  background: #DA3225;
}

.no-data-extraction__block--hey header {
  background: var(--color-blurple);
}

@media(min-width: 64em) {

  .no-data-extraction {
    flex-direction: row;
    gap: var(--space-medium);
    padding-left: var(--space-large);
    padding-right: var(--space-large);
    width: min(100%, 40em);
  }

  .no-data-extraction__block footer {
    display: flex;
  }

}