.grid {
  display: grid;
  grid-column-gap: 24px;
  grid-row-gap: 24px; }
  .grid.half {
    grid-template-columns: 1fr 1fr; }
  .grid.third {
    grid-template-columns: 1fr 1fr 1fr; }
  .grid.v-center {
    align-items: center; }
  .grid.no-row-gap {
    grid-row-gap: 0; }
	
	.card {
  background-color: #FFF;
  box-shadow: 0 1px 6px -1px rgba(0, 0, 0, 0.1);
  border-radius: 3px;
  border: 1px solid transparent; }
  .card .body, .card p.empty-text {
    padding: 16px; }
  .card a, .card p {
    word-wrap: break-word;
    word-break: break-word; }


  .content-wrap.card {
  padding: 16px 24px;
  margin-inline-start: auto;
  margin-inline-end: auto;
  margin-bottom: 32px;
  overflow: initial;
  min-height: 60vh; }
  .content-wrap.card.auto-height {
    min-height: 0; }
  .content-wrap.card.fill-width {
    width: 100%; }

	@media screen and (max-width: 880px) {
  .grid.third:not(.no-break) {
    grid-template-columns: 1fr 1fr; }
  .grid.half:not(.no-break), .grid.left-focus:not(.no-break), .grid.right-focus:not(.no-break), .grid.right-focus-2:not(.no-break) {
    grid-template-columns: 1fr; }
  .grid.half.collapse-xs {
    grid-template-columns: 1fr 1fr; }
  .grid.gap-xl {
    grid-column-gap: 16px;
    grid-row-gap: 16px; }
  .grid.right-focus.reverse-collapse > *:nth-child(2) {
    order: 0; }
  .grid.right-focus.reverse-collapse > *:nth-child(1) {
    order: 1; } }
	
	@media screen and (max-width: 600px) {
  .grid.third:not(.no-break) {
    grid-template-columns: 1fr; } }

@media screen and (max-width: 400px) {
  .grid.half.collapse-xs {
    grid-template-columns: 1fr; } }
	
@media screen and (max-width: 1400px) {
  .content-wrap.card {
    padding: 16px 24px; } }

@media screen and (max-width: 880px) {
  .content-wrap.card {
    padding: 16px 24px; } }

@media screen and (max-width: 600px) {
  .content-wrap.card {
    padding: 16px 16px; } }
	
	@media screen and (min-width: 880px) {
  .text-m-center {
    text-align: center; }
  .text-m-left {
    text-align: start; }
  .text-m-right {
    text-align: end; } }
.my-m {
  margin-top: 16px !important;
  margin-bottom: 16px !important; }
.text-center {
  text-align: center; }