.sec-tools {
  
  padding-block: 20px 137px;

  --tools-col: 302px; 
  --tools-row: 34px; 
  --tools-pitch: 2px; 
  
  --tools-item-fs: 13.5px;
}

.sec-tools__inner {
  display: flex;
  align-items: flex-start;
  gap: 47px;
}

.sec-tools__main {
  flex: 0 0 612px;
}

.sec-tools__title {
  font-size: var(--fs-h2);
  line-height: 60px;
  letter-spacing: 0;
  color: var(--text-strong);
}

.sec-tools__lists {
  display: flex;
  gap: 8px;
  margin-top: 43px;
}

.sec-tools__col {
  display: flex;
  flex-direction: column;
  gap: var(--tools-pitch);
  width: var(--tools-col);
}

.sec-tools__item {
  display: flex;
  align-items: center;
  min-height: var(--tools-row);
  
  padding: 4px 19px 4px 23px;
  border-radius: calc(var(--tools-row) / 2);
  background: var(--surface);
  font-size: var(--tools-item-fs);
  font-weight: 500;
  line-height: 1.4;
  color: var(--text);
}

.sec-tools__item--bare {
  background: none;
}

.sec-tools__deck-scroll {
  flex: none;
}

.sec-tools__deck {
  width: 885px;
  height: 366px;
  max-width: none;
  margin-top: 77px;
}

@media (max-width: 1099px) {
  .sec-tools {
    padding-block: 64px;
  }

  .sec-tools__inner {
    flex-direction: column;
    gap: 40px;
  }

  .sec-tools__main {
    flex: 1 1 auto;
    width: 100%;
  }

  .sec-tools__deck-scroll {
    width: 100%;
    max-width: 885px;
  }

  .sec-tools__deck {
    width: 100%;
    max-width: 885px;
    height: auto;
    margin-top: 0;
  }
}

@media (max-width: 767px) {
  .sec-tools {
    
    --tools-row: 44px;
    --tools-pitch: 6px;
    --tools-item-fs: var(--sp-fs-body);

    padding-block: 8px 56px;
  }

  .sec-tools__inner {
    gap: 28px;
  }

  .sec-tools__title {
    font-size: var(--sp-fs-h2);
    line-height: 34.75px;
  }

  .sec-tools__lists {
    flex-direction: column;
    gap: var(--tools-pitch);
    margin-top: 24px;
  }

  .sec-tools__col {
    width: 100%;
  }

  .sec-tools__item {
    padding: 8px 18px;
    line-height: 1.5;
  }

  
  .sec-tools__item--bare {
    min-height: 0;
    padding-block: 4px;
  }

  
}