body {
  background: #f5f5f5;
}

.banner {
    box-sizing: border-box;
    padding: .28rem .24rem;
    height: 1.73rem;
    background: url(/Areas/Content/images/zone-select-banner.png) no-repeat 0 0/100% 100%;
}

.banner .title {
  font-size: .20rem;
  font-weight: 600;
  color: #ffffff;
  line-height: .28rem;
}

.card {
  margin: -.20rem .12rem .20rem;
  padding: .12rem;
  background: #ffffff;
  border-radius: 0.08rem;
}

.card .title {
  font-size: .17rem;
  font-weight: 500;
  color: #333333;
  line-height: .22rem;
}

.content {
  margin-top: .20rem;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .12rem;
}

.icon {
  margin: 0 auto 0.08rem;
  width: .61rem;
  height: .61rem;
}

.zone-item {
  box-sizing: border-box;
  padding: .20rem .12rem;
  border-radius: 0.08rem;
  border: 0.01rem solid #eeeeee;
  text-align: center;
}

.text {
  font-size: .15rem;
  font-weight: 400;
  color: #333333;
  line-height: .21rem;
}