.tools {
    grid-column: 1 / -1;
    padding: var(--space-lg) var(--space-lg) var(--space-3xl) var(--space-lg);
    display: grid;
    grid-template-columns: var(--content-grid);
}

.tools__groups {
    grid-column: 1 / -1;
    display: grid;
    gap: var(--space-3xl);
}

.tools__group {
    padding: var(--space-lg) 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, calc(var(--col-width) * 2));
    grid-auto-rows: calc(var(--col-width) * 2);
    gap: var(--space-xs);
}

.tools__group:nth-child(odd) {
    justify-content: right;
}

.tools__title-cell {
    padding: 0 var(--space-xs);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    background: var(--color-accent);
}

.tools__title {
    font-family: var(--ff-primary);
    font-size: var(--fs-title);
    font-weight: normal;
    text-transform: uppercase;
    color: var(--color-bg);
    line-height: 1.1;
}

.tools__item {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    border: 1px solid var(--color-border);
}

.tools__item-icon-wrapper {
    width: 45%;
}

.tools__item-icon {
    width: 100%;
    height: auto;
    display: block;
    filter: grayscale(0.50) contrast(1.10) brightness(1.10);
}

.tools__item-text {
    font-family: var(--ff-secondary);
    font-size: var(--fs-caption);
    font-weight: lighter;
    text-align: center;
    text-transform: uppercase;
    color: var(--color-text);
}

.tools__item--featured .tools__item-text {
    font-size: var(--fs-body);
}

.tools__item--text {
    padding: var(--space-sm);
    background: transparent;
}

.tools__item--text .tools__item-text {
    font-family: var(--ff-primary);
    font-size: var(--fs-caption);
    font-weight: normal;
    text-transform: none;
    text-align: center;
    line-height: 1.2;
}

.tools__item--text-lg .tools__item-text {
    font-size: var(--fs-title);
}

.tools__group--lenguajes {
    grid-template-columns: repeat(7, calc(var(--col-width) * 2));
}

.tools__group--lenguajes .tools__title-cell {
    grid-column: 1 / 3;
    grid-row: 1 / 3;
}

.tools__group--lenguajes .tools__item--html {
    grid-column: 3;
    grid-row: 1;
}

.tools__group--lenguajes .tools__item--css {
    grid-column: 4;
    grid-row: 1;
}

.tools__group--lenguajes .tools__item--typescript {
    grid-column: 5 / 7;
    grid-row: 1 / 3;
}

.tools__group--lenguajes .tools__item--javascript {
    grid-column: 7;
    grid-row: 1;
}

.tools__group--lenguajes .tools__item--php {
    grid-column: 3;
    grid-row: 2;
}

.tools__group--lenguajes .tools__item--python {
    grid-column: 4;
    grid-row: 2;
}

.tools__group--lenguajes .tools__item--csharp {
    grid-column: 1 / 3;
    grid-row: 3 / 5;
}

.tools__group--lenguajes .tools__item--java {
    grid-column: 3;
    grid-row: 3;
}

.tools__group--frameworks {
    grid-template-columns: repeat(6, calc(var(--col-width) * 2));
}

.tools__group--frameworks .tools__item--angular {
    grid-column: 1 / 3;
    grid-row: 1 / 3;
}

.tools__group--frameworks .tools__item--react {
    grid-column: 3;
    grid-row: 1;
}

.tools__group--frameworks .tools__title-cell {
    grid-column: 4 / 6;
    grid-row: 1;
}

.tools__group--frameworks .tools__item--vue {
    grid-column: 6;
    grid-row: 1;
}

.tools__group--frameworks .tools__item--dotnet {
    grid-column: 3 / 5;
    grid-row: 2 / 4;
}

.tools__group--frameworks .tools__item--laravel {
    grid-column: 5;
    grid-row: 2;
}

.tools__group--frameworks .tools__item--node {
    grid-column: 6;
    grid-row: 2;
}

.tools__group--data {
    grid-template-columns: repeat(4, calc(var(--col-width) * 2));
}

.tools__group--data .tools__item--mongodb {
    grid-column: 1;
    grid-row: 1;
}

.tools__group--data .tools__item--mariadb {
    grid-column: 2;
    grid-row: 1;
}

.tools__group--data .tools__title-cell {
    grid-column: 3 / 5;
    grid-row: 1 / 3;
}

.tools__group--data .tools__item--mysql {
    grid-column: 2;
    grid-row: 2;
}

.tools__group--devops {
    grid-template-columns: repeat(5, calc(var(--col-width) * 2));
}

.tools__group--devops .tools__title-cell {
    grid-column: 1 / 3;
    grid-row: 1;
}

.tools__group--devops .tools__item--docker {
    grid-column: 3;
    grid-row: 1;
}

.tools__group--devops .tools__item--git {
    grid-column: 4;
    grid-row: 1;
}

.tools__group--devops .tools__item--gitlab {
    grid-column: 3;
    grid-row: 2;
}

.tools__group--devops .tools__item--github {
    grid-column: 4 / 6;
    grid-row: 2 / 4;
}

.tools__group--arquitectura {
    grid-template-columns: repeat(5, calc(var(--col-width) * 2));
}

.tools__group--arquitectura .tools__title-cell {
    grid-column: 1 / 3;
    grid-row: 1;
}

.tools__group--arquitectura .tools__item--solid {
    grid-column: 3 / 5;
    grid-row: 1 / 3;
}

.tools__group--arquitectura .tools__item--patrones {
    grid-column: 1 / 3;
    grid-row: 2 / 4;
}

.tools__group--arquitectura .tools__item--cleancode {
    grid-column: 5;
    grid-row: 2;
}

.tools__group--arquitectura .tools__item--hexagonal {
    grid-column: 3;
    grid-row: 3;
}

.tools__group--arquitectura .tools__item--feature {
    grid-column: 4;
    grid-row: 3;
}

.tools__group--arquitectura .tools__item--typebased {
    grid-column: 5;
    grid-row: 3;
}

.tools__group:last-of-type .tools__title-cell {
    grid-column: 1 / 3;
    grid-row: 1;
}

@media only screen and (max-width: 1900px) {
    .tools__group:nth-child(even) {
        justify-content: left;
    }

    .tools__group:nth-child(odd) {
        justify-content: right;
    }

    .tools__title {
        font-size: var(--fs-title-sm);
    }

    .tools__title-cell {
        padding: 0 var(--space-xs);
    }

    .tools__item--text-lg .tools__item-text {
        font-size: var(--fs-title-sm);
    }
}

@media only screen and (max-width: 1250px) {
    .tools__group {
        grid-template-columns: repeat(auto-fill, minmax(calc(var(--col-width) * 2), 1fr));
        grid-auto-rows: calc(var(--col-width) * 2);
    }

    .tools__group>* {
        grid-column: auto;
        grid-row: auto;
    }

    .tools__group:nth-child(even) {
        justify-content: left;
    }

    .tools__group:nth-child(odd) {
        justify-content: right;
    }

    .tools__title-cell,
    .tools__item--featured,
    .tools__item--text-lg {
        grid-column: span 2;
        grid-row: span 2;
    }

    .tools__item {
        gap: var(--space-xs);
    }
}

@media only screen and (max-width: 800px) {
    :root {
        --tools-cell: clamp(90px, 22vw, 130px);
    }

    .tools {
        padding: 0 var(--space-sm);
    }

    .tools__groups {
        gap: var(--space-md);
    }

    .tools__group>* {
        grid-column: auto;
        grid-row: auto;
        aspect-ratio: auto;
    }

    .tools__group {
        grid-template-columns: repeat(3, var(--tools-cell));
        grid-auto-rows: var(--tools-cell);
        justify-content: center;
    }

    .tools__group--data,
    .tools__group:last-of-type {
        grid-template-columns: repeat(2, var(--tools-cell));
    }

    .tools__group--lenguajes .tools__title-cell {
        grid-column: 2 / span 2;
        grid-row: 1;
    }

    .tools__group--lenguajes .tools__item--html {
        grid-column: 1;
        grid-row: 1;
    }

    .tools__group--lenguajes .tools__item--css {
        grid-column: 2;
        grid-row: 3;
    }

    .tools__group--lenguajes .tools__item--javascript {
        grid-column: 1;
        grid-row: 2;
    }

    .tools__group--lenguajes .tools__item--typescript {
        grid-column: 2;
        grid-row: 2;
    }

    .tools__group--lenguajes .tools__item--php {
        grid-column: 3;
        grid-row: 2;
    }

    .tools__group--lenguajes .tools__item--python {
        grid-column: 1;
        grid-row: 3;
    }

    .tools__group--lenguajes .tools__item--csharp {
        grid-column: 3;
        grid-row: 3;
    }

    .tools__group--lenguajes .tools__item--java {
        grid-column: 2;
        grid-row: 4;
    }

    .tools__group--frameworks .tools__item--angular {
        grid-column: 1;
        grid-row: 1;
    }

    .tools__group--frameworks .tools__item--react {
        grid-column: 2;
        grid-row: 2;
    }

    .tools__group--frameworks .tools__title-cell {
        grid-column: 2 / span 2;
        grid-row: 1;
    }

    .tools__group--frameworks .tools__item--dotnet {
        grid-column: 1;
        grid-row: 2;
    }

    .tools__group--frameworks .tools__item--vue {
        grid-column: 3;
        grid-row: 2;
    }

    .tools__group--frameworks .tools__item--laravel {
        grid-column: 2;
        grid-row: 3;
    }

    .tools__group--frameworks .tools__item--node {
        grid-column: 3;
        grid-row: 3;
    }

    .tools__group--data .tools__title-cell {
        grid-column: 1 / span 2;
        grid-row: 1;
    }

    .tools__group--data .tools__item--mongodb {
        grid-column: 2;
        grid-row: 2;
    }

    .tools__group--data .tools__item--mariadb {
        grid-column: 1;
        grid-row: 2;
    }

    .tools__group--data .tools__item--mysql {
        grid-column: 2;
        grid-row: 3;
    }

    .tools__group--devops .tools__title-cell {
        grid-column: 1 / span 2;
        grid-row: 2;
    }

    .tools__group--devops .tools__item--docker {
        grid-column: 1;
        grid-row: 1;
    }

    .tools__group--devops .tools__item--git {
        grid-column: 2;
        grid-row: 1;
    }

    .tools__group--devops .tools__item--gitlab {
        grid-column: 3;
        grid-row: 1;
    }

    .tools__group--devops .tools__item--github {
        grid-column: 3;
        grid-row: 2;
    }

    .tools__group--arquitectura .tools__title-cell {
        grid-column: 2 / span 2;
        grid-row: 2;
    }

    .tools__group--arquitectura .tools__item--solid {
        grid-column: 1;
        grid-row: 1;
    }

    .tools__group--arquitectura .tools__item--patrones {
        grid-column: 2;
        grid-row: 1;
    }

    .tools__group--arquitectura .tools__item--cleancode {
        grid-column: 3;
        grid-row: 1;
    }

    .tools__group--arquitectura .tools__item--hexagonal {
        grid-column: 1;
        grid-row: 2;
    }

    .tools__group--arquitectura .tools__item--feature {
        grid-column: 3;
        grid-row: 3;
    }

    .tools__group--arquitectura .tools__item--typebased {
        grid-column: 2;
        grid-row: 3;
    }

    .tools__group:last-of-type .tools__title-cell {
        grid-column: 1 / span 2;
        grid-row: 1;
    }

    .tools__group:last-of-type .tools__item:nth-of-type(2) {
        grid-column: 2;
        grid-row: 2;
    }

    .tools__group:last-of-type .tools__item:nth-of-type(3) {
        grid-column: 1;
        grid-row: 2;
    }

    .tools__item-icon-wrapper {
        width: 55%;
    }

    .tools__item--featured .tools__item-text {
        font-size: var(--fs-caption);
    }
}