.actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px 24px;
  margin-top: 32px;}
.lead {
  max-width: 600px;
  font-size: 20px;
  line-height: 1.6;
  color: #fff;}
.inner {width: min(100%, 1120px); margin: 0 auto;}
.cards {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin: 20px;}
.card {
  display: flex;
  max-height:228px;
  width: 110%;
  max-width: 520px;
  flex-direction: column;
  align-items: flex-start;
  padding: 24px;
  border: 1px solid #dfe2df;
  border-radius: 8px;
  background: #fff;
  color: #202528 !important;
  text-align: left;
  text-decoration: none;
  transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;}
.card:hover {border-color:#09f;}
.card img {width:38px;height:38px;object-fit:contain;margin-bottom:20px;}
.card h3 {margin-bottom:6px;font-size:21px;}
.card p {color:#62696b;text-align:left;}
.action {margin-top:auto;padding-top:18px;color:#09f;}
#descs {padding:120px max(24px,calc((100vw- 1120px)/2));}
.desc {
  margin: 0 auto;
  justify-content: center; 
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 400px;}
.desc img {
  min-width: 90px;
  width: 30%;
  max-width: 100px;
  -webkit-user-select: none;
  user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;}
.desc h2 {margin: 8px 0;}

@media (min-width: 800px) {
  #descs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 80px;
    width: 100%;
    max-width: 1120px;
    margin: 20px auto 0;
    justify-content: center;
    box-sizing: border-box;}
  .desc img {width: 100px;}
  .cards {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: 100%;
    max-width: 1120px;
    margin: 20px auto;
    gap: 16px;}
  .card {
    width: 100%;
    height: 228px;
    max-width: none;
    max-height: none;
  }
}