.portfolio-single {
background-color: var(--c-white);
} .portfolio-single__image {
max-width: 780px;
margin-inline: auto;
padding-inline: var(--pad-x);
}
.portfolio-single__image img {
width: 100%;
height: auto;
display: block;
} .portfolio-single__body {
padding: 3.5rem var(--pad-x) 5.5rem;
}
.portfolio-single__body-inner {
max-width: 780px;
margin-inline: auto;
display: flex;
flex-direction: column;
gap: 1.5rem;
} .portfolio-single__title {
font-family: var(--f-heading);
font-size: var(--text-5xl);
font-weight: 400;
color: var(--c-dark);
line-height: 1.15;
} .portfolio-single__cats {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
}
.portfolio-single__cat {
display: inline-block;
font-family: var(--f-ui);
font-size: var(--text-xs);
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--c-text-2);
text-decoration: none;
background-color: var(--c-gray);
padding: 0.3rem 0.75rem;
border-radius: var(--r-full);
transition: color var(--t), background-color var(--t);
}
.portfolio-single__cat:hover {
color: var(--c-dark);
background-color: var(--c-gray-2);
} .portfolio-single__content {
display: flex;
flex-direction: column;
gap: 1rem;
}
.portfolio-single__content h2,
.portfolio-single__content h3 {
font-family: var(--f-ui);
font-size: var(--text-base);
font-weight: 700;
color: var(--c-dark);
padding-bottom: 0.625rem;
border-bottom: 1px solid var(--c-border);
margin-top: 1.75rem;
}
.portfolio-single__content h2:first-child,
.portfolio-single__content h3:first-child {
margin-top: 0;
}
.portfolio-single__content p {
font-family: var(--f-body);
font-size: var(--text-base);
line-height: 1.75;
color: var(--c-text-2);
}
.portfolio-single__content ul,
.portfolio-single__content ol {
padding-left: 1.25rem;
display: flex;
flex-direction: column;
gap: 0.375rem;
}
.portfolio-single__content ul { list-style: disc; }
.portfolio-single__content ol { list-style: decimal; }
.portfolio-single__content li {
font-family: var(--f-body);
font-size: var(--text-base);
line-height: 1.6;
color: var(--c-text-2);
}
.portfolio-single__content a {
color: var(--c-accent);
text-decoration: underline;
text-decoration-color: transparent;
transition: text-decoration-color var(--t);
}
.portfolio-single__content a:hover {
text-decoration-color: var(--c-accent);
} .portfolio-single__actions {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 1rem;
padding-top: 0.5rem;
} @media (max-width: 1024px) {
.portfolio-single__title {
font-size: var(--text-4xl);
}
}
@media (max-width: 768px) {
.portfolio-single__body {
padding: 2.5rem var(--pad-x) 4rem;
}
.portfolio-single__title {
font-size: var(--text-3xl);
}
.portfolio-single__actions {
flex-direction: column;
align-items: stretch;
}
.portfolio-single__actions .btn {
justify-content: center;
}
}