/*
 * Section elements
 *
 */
.pkt-section {
  margin: 1rem 0;
}

.pkt-section--dark {
  color: var(--pkt-color-text-body-light, #ffffff);
  margin: 1rem 0;
  padding: 0.75rem;
  background-color: var(--pkt-color-surface-strong-dark-blue, #2a2859);
}
@media screen and (min-width: 36rem) {
  .pkt-section--dark {
    padding: 1rem;
  }
}
@media screen and (min-width: 48rem) {
  .pkt-section--dark {
    padding: 1.5rem;
  }
}

.pkt-section--danger {
  color: var(--pkt-color-text-body-dark, #2a2859);
  margin: 1rem 0;
  padding: 0.75rem;
  background-color: var(--pkt-color-surface-strong-red, #ff8274);
}
@media screen and (min-width: 36rem) {
  .pkt-section--danger {
    padding: 1rem;
  }
}
@media screen and (min-width: 48rem) {
  .pkt-section--danger {
    padding: 1.5rem;
  }
}

.pkt-section--gray,
.pkt-section--grey {
  margin: 1rem 0;
  padding: 0.75rem;
  background-color: var(--pkt-color-surface-default-gray, #f2f2f2);
}
@media screen and (min-width: 36rem) {
  .pkt-section--gray,
  .pkt-section--grey {
    padding: 1rem;
  }
}
@media screen and (min-width: 48rem) {
  .pkt-section--gray,
  .pkt-section--grey {
    padding: 1.5rem;
  }
}

.pkt-section--success {
  color: var(--pkt-color-text-body-dark, #2a2859);
  margin: 1rem 0;
  padding: 0.75rem;
  background-color: var(--pkt-color-surface-strong-green, #43f8b6);
}
@media screen and (min-width: 36rem) {
  .pkt-section--success {
    padding: 1rem;
  }
}
@media screen and (min-width: 48rem) {
  .pkt-section--success {
    padding: 1.5rem;
  }
}

.pkt-section--warning {
  margin: 1rem 0;
  padding: 0.75rem;
  background-color: var(--pkt-color-surface-strong-yellow, #f9c66b);
}
@media screen and (min-width: 36rem) {
  .pkt-section--warning {
    padding: 1rem;
  }
}
@media screen and (min-width: 48rem) {
  .pkt-section--warning {
    padding: 1.5rem;
  }
}

.pkt-section--info {
  margin: 1rem 0;
  padding: 0.75rem;
  background-color: var(--pkt-color-surface-default-light-blue, #b3f5ff);
}
@media screen and (min-width: 36rem) {
  .pkt-section--info {
    padding: 1rem;
  }
}
@media screen and (min-width: 48rem) {
  .pkt-section--info {
    padding: 1.5rem;
  }
}

.pkt-section--frame {
  border: 1px solid var(--pkt-color-brand-neutrals-1000, #2c2c2c);
  margin: 1rem 0;
  padding: 0.75rem;
  background-color: var(--pkt-color-surface-subtle-white, #ffffff);
}
@media screen and (min-width: 36rem) {
  .pkt-section--frame {
    padding: 1rem;
  }
}
@media screen and (min-width: 48rem) {
  .pkt-section--frame {
    padding: 1.5rem;
  }
}

[class*=ok-section-] > [class^=ok-title-] {
  margin-block-start: 0;
}

.pkt-section--margin-top {
  margin-block-start: 2.5rem;
}