@use '../../_global/styles/mixins' as *;
@use '../../_global/styles/vars' as *;

.superlist {
  padding-top: 20px;
  padding-bottom: 20px;
  background: var(--color-background);
  border-radius: var(--border-radius-lg);
  @media (min-width: 768px) {
    padding-top: 30px;
    padding-bottom: 30px;
  }
  @media (min-width: 1200px) {
    padding-top: 40px;
    padding-bottom: 40px;
  }
  @media (min-width: 1200px) {
    padding-top: 60px;
    padding-bottom: 60px;
  }
  .list-container {
      padding: 0 var(--content-box-padding);

    .button-container {
      display: flex;
      flex-direction: column;
      padding-top: 40px;
      border-top: 1px solid var(--color-surface-inset);

      .btn {
        margin: 0 auto;
      }
    }
  }

  &--list {
    padding: 40px 0 30px 0;
  }

  &.centered {
    .superlist--list {
      padding-bottom: 40px;
    }
  }
}