:root {
    --color-light-green: #3DDC97;
}

.portfolio__icon {
    margin-bottom: 1rem;
}
.portfolio__icon img {
    width: 4%;
    filter: invert(1.5) sepia(1) saturate(4) hue-rotate(25deg);
}
.portfolio__categories {
    margin-bottom: 2rem;
}
.portfolio__categories_item {
    display: inline;
    padding: 0.8rem 0.2rem;
    border-radius: 2rem;
    background: rgba(255, 255, 255, .05);
    margin: 0 auto;
}
.portfolio__categories_item span {
    margin: 4px;
    text-transform: uppercase;
    border: 2px solid;
    border-radius: 1rem;
    padding: 0.2rem 0.9rem;
}
.portfolio__content {
    margin-top: 1rem;
}

/* Categories */
.portfolio__categories_item .class-typo3,
.portfolio__categories_item .class-wordpress,
.portfolio__categories_item .class-figma,
.portfolio__categories_item .class-elementor,
.portfolio__categories_item .class-design,
.portfolio__categories_item .class-webdevelopment,
.portfolio__categories_item .class-werkstudent {
    border: 2px solid #89DE26;
    color: #89DE26;
}
.portfolio__categories_item .class-concept,
.portfolio__categories_item .class-marketing {
    border: 2px solid #FF8D27;
    color: #FF8D27;
}
.portfolio__categories_item .class-seo,
.portfolio__categories_item .class-geschäftsführung,
.portfolio__categories_item .class-buchhaltung {
    border: 2px solid #2D97D7;
    color: #2D97D7;
}


@media(min-width: 592px) and (max-width: 1024px) {
    .portfolio__categories_item span {
        font-size: 0.7rem;
    }
    .portfolio__categories_item {
        padding: 0.5rem 0.2rem;
    }
}
@media(max-width: 591px) {
    .portfolio__categories_item span {
        margin-right: 3px;
        border-radius: 1rem;
        padding: 0.1rem 0.7rem;
        font-size: .9rem;
    }
}