.skills-grid {
    flex: 1;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    /* grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); */
}

@media (max-width: 900px) {
  /* .skills-grid {
    grid-template-columns: repeat(2, 1fr);
  } */
}

@media (max-width: 500px) {
  /* .skills-grid {
    grid-template-columns: 1fr;
  } */
}

.skills-col {
    padding: 0px 15px;
    position: relative;
    border-left: 3px solid;
    border-image: linear-gradient(to bottom, var(--border-color-top), var(--border-color-bottom)) 1;
    /* border-left: 3px solid color-mix(in srgb, var(--button-hover-color) 85%, transparent); */
    white-space: nowrap; 
    text-align: left;
}

.skills-col:first-child {
    border-left: none;
}

.skills-col h3 {
    margin-bottom: 15px;
    text-align: left;
}

.skills-col-tags {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    justify-items: center;
    gap: 10px;
    
}

@media (max-width: 1000px) {
    .skills {
        flex-direction: column;
    }

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

@media (max-width: 800px) {
    .skills-grid {
        grid-template-columns: 1fr;
    }
}

.skills-tags{
    display: inline-flex;
    border:2px solid var(--accent-color);
    border-radius:50%;
    text-align:center;
    align-items: center;
    justify-content: center;
    margin:10px 10px 10px 0;
    padding:0;
    width:100px;
    height:100px;
    font-size:1.5rem;
}
/* .skills-tags span{
    display:inline;
    border:2px solid rgba(57,57,57,.5);
    border-radius:50%;
    text-align:center;
    margin:10px 10px 10px 0;
    padding:0;
    width:100px;
    height:100px;
    line-height:7;
    font-size:14px;
} */


/* .skills-tags span {
    padding: 8px 14px;
    border-radius: 100px;
    background: color-mix(in srgb, var(--button-color) 30%, transparent);
    font-size: 0.9rem;
} */

.skills-col ul {
    list-style: none;
    padding: 0;
}

.skills-col-list li {
    position: relative;
    padding-left: 20px;
    margin-bottom: 8px;
}

.skills-col-list li::before{
    content: "✔";
    position: absolute;
    left: 0;
    opacity: 0.7;
}
/* .skills-col li::before {
    content: "✔";
    position: absolute;
    left: 0;
    opacity: 0.7;
} */