@import 'variables';

.modalThanks {
  @media (min-width: $screen-sm) {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
  }

  h4 {
    text-align: center;
    margin: 0;
    margin-bottom: $spacer / 2;
    color: $brand-grey;
    text-transform: capitalize;

    :global(.dark) & {
      color: $brand-grey-light;
    }
  }

  header {
    width: 100%;
    text-align: center;
    margin-bottom: $spacer;

    // stylelint-disable-next-line no-descending-specificity
    h4 {
      font-size: $font-size-large;
      margin-top: 0;
      margin-bottom: $spacer / 6;
    }

    p {
      color: $brand-grey-light;

      :global(.dark) & {
        color: $brand-grey;
      }
    }
  }
}

.coin {
  margin-top: $spacer;

  @media (min-width: $screen-sm) {
    width: 48%;
    margin-top: 0;
  }
}