/* ==========================================================================
   Component: Popular Tools
   ========================================================================== */

.tools { background: var(--color-white); }

.tools__grid{
    display:grid;
    grid-template-columns:1fr;
    gap:20px;
}

@media (min-width:640px){

    .tools__grid{
        grid-template-columns:repeat(2,1fr);
    }

}

@media (min-width: 1200px) {
  .tools__grid{
      grid-template-columns:repeat(5,minmax(0,1fr));
      gap:24px;
  }
}

@media (min-width:768px) and (max-width:1199px){

    .tools__grid{
        grid-template-columns:repeat(3,1fr);
        gap:22px;
    }

}

.tool-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding:28px;
    min-height:235px;
  text-align: left;
}

.tool-card__tag {
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--color-primary);
  background: var(--color-primary-tint-10);
  padding: 3px 10px;
  border-radius: var(--radius-pill);
}

.tool-card__icon{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    width:auto;
    height:auto;
    margin-bottom:8px;

    background:transparent;
    border:none;
    border-radius:0;
    box-shadow:none;

    transition:transform var(--duration-base) var(--ease-out-soft);
}

.tool-card:hover .tool-card__icon{
    transform:scale(1.08);
}

.tool-card__icon img{
    width:40px;
    height:40px;
}

.tool-card__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 22px;
  color: var(--color-text);
  margin-bottom: 10px;
}

.tool-card__desc {
  font-size: 1rem;
  color: var(--color-text-secondary);
  line-height: 1.6;
}


@media (max-width: 640px){

    .tool-card{
        display:grid;
        grid-template-columns:50px 1fr;
        grid-template-rows:auto auto;
        align-items:center;
        column-gap:none;
        row-gap:6px;

        min-height:125px;
        padding:22px;
    }

    .tool-card__icon{
    grid-row:1 / span 2;
    grid-column:1;

    display:flex;
    align-items:center;
    justify-content:center;

    width:40px;
    height:100%;
    margin-left: -15px;
}

    .tool-card__icon img{
        width:44px;
        height:44px;
    }

    .tool-card__name{
        grid-column:2;
        margin-left: -15px;
        margin-bottom: -15px;
        font-size:18px;
        line-height:1.2;
    }

    .tool-card__desc{
        grid-column:2;
        margin-top:-4px;
        margin-left: -15px;
        font-size:1rem;
        line-height:1.45;
    }

    .tool-card__tag{
        top:18px;
        right:18px;
    }

}