/**
 * Frontend styles for the market block.
 */
:root {
  --bg-mid: #f5f8fb;
  --cyan: var(--cyan);
  --ink: #111827;
  --line: #ebf2fa;
  --icon: #415c82;
}

.market {
  background: var(--bg-mid);
  padding: 48px 0 144px;
  color: var(--ink);
}

.market .container {
  max-width: 1560px;
  margin: 0 auto;
  padding: 96px 24px 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.market .subtitle {
  text-align: left;
  font-size: 32px;
  font-weight: 700;
  line-height: 35px;
  color: var(--cyan);
  margin: 0;
  padding: 0;
}

.market h2 {
  text-align: left;
  font-size: 48px;
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 104px;
}

.market h2 span {
  color: var(--cyan);
}

.market .grid-block {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-content: flex-start;
  text-align: center;
}

.market h3 {
  font-size: 24px;
  min-height: 56px;
  margin: 0 8px 8px;
  font-weight: 700;
}

.market p {
  margin: 0 0 4px;
}

.market article {
  position: relative;
  max-width: 360px;
  min-width: 360px;
  margin-bottom: 40px;
  min-height: 296px;
}

.market article .icon {
  width: 96px;
  margin: 0 auto 40px;
  height: 96px;
  font-size: 48px;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid var(--icon);
  border-radius: 100%;
  color: var(--icon);
}

.market article img {
  height: 70px;
  display: block;
  margin: 0 auto 24px;
}

/* Responsive */
@media (max-width: 992px) {
  .market {
    padding: 40px 0 0;
  }
  .market .container {
    padding: 0 16px;
    max-width: 380px;
    margin: auto;
  }
  .market .subtitle {
    font-size: 20px;
  }
  .market h2 {
    font-size: 32px;
    margin-bottom: 48px;
  }
  .market article {
    max-width: 300px;
    min-height: auto;
    margin-bottom: 80px;
  }
  .market article .icon {
    width: 80px;
    height: 80px;
    font-size: 40px;
    margin-bottom: 32px;
  }
  .market article h3 {
    font-size: 20px;
  }
  .market article p {
    font-size: 20px;
  }
}