.van-grid {
  display: flex;
  flex-wrap: wrap;
}

:root,
:host {
  --van-grid-item-content-padding: var(--van-padding-md) var(--van-padding-xs);
  --van-grid-item-content-background: var(--van-background-2);
  --van-grid-item-content-active-color: var(--van-active-color);
  --van-grid-item-icon-size: 28px;
  --van-grid-item-text-color: var(--van-text-color);
  --van-grid-item-text-font-size: var(--van-font-size-sm);
}

.van-grid-item {
  position: relative;
  box-sizing: border-box;
}

.van-grid-item--square {
  height: 0;
}

.van-grid-item__icon {
  font-size: var(--van-grid-item-icon-size);
}

.van-grid-item__text {
  color: var(--van-grid-item-text-color);
  font-size: var(--van-grid-item-text-font-size);
  line-height: 1.5;
  word-break: break-all;
}

.van-grid-item__icon + .van-grid-item__text {
  margin-top: var(--van-padding-xs);
}

.van-grid-item__content {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  height: 100%;
  padding: var(--van-grid-item-content-padding);
  background: var(--van-grid-item-content-background);
}

.van-grid-item__content:after {
  z-index: 1;
  border-width: 0 var(--van-border-width) var(--van-border-width) 0;
}

.van-grid-item__content--square {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
}

.van-grid-item__content--center {
  align-items: center;
  justify-content: center;
}

.van-grid-item__content--horizontal {
  flex-direction: row;
}

.van-grid-item__content--horizontal .van-grid-item__text {
  margin: 0 0 0 var(--van-padding-xs);
}

.van-grid-item__content--reverse {
  flex-direction: column-reverse;
}

.van-grid-item__content--reverse .van-grid-item__text {
  margin: 0 0 var(--van-padding-xs);
}

.van-grid-item__content--horizontal.van-grid-item__content--reverse {
  flex-direction: row-reverse;
}

.van-grid-item__content--horizontal.van-grid-item__content--reverse
  .van-grid-item__text {
  margin: 0 var(--van-padding-xs) 0 0;
}

.van-grid-item__content--surround:after {
  border-width: var(--van-border-width);
}

.van-grid-item__content--clickable {
  cursor: pointer;
}

.van-grid-item__content--clickable:active {
  background-color: var(--van-grid-item-content-active-color);
}