@font-face {
font-display: swap;
font-family: 'Inter';
font-style: normal;
font-weight: 400;
src: url(//hagstone-bramble.com/wp-content/themes/hagstone/fonts/inter-v19-latin-regular.woff2) format('woff2');
}
@font-face {
font-display: swap;
font-family: 'Inter';
font-style: normal;
font-weight: 500;
src: url(//hagstone-bramble.com/wp-content/themes/hagstone/fonts/inter-v19-latin-500.woff2) format('woff2');
}
@font-face {
font-display: swap;
font-family: 'Inter';
font-style: normal;
font-weight: 700;
src: url(//hagstone-bramble.com/wp-content/themes/hagstone/fonts/inter-v19-latin-700.woff2) format('woff2');
}
@font-face {
font-display: swap;
font-family: 'Inter';
font-style: normal;
font-weight: 900;
src: url(//hagstone-bramble.com/wp-content/themes/hagstone/fonts/inter-v19-latin-900.woff2) format('woff2');
} :root { --color-bg: #111111;
--color-text: #ffffff;
--color-text-muted: #b8b8b8;
--color-accent: #e8e8e8;
--color-border: rgba(255, 255, 255, 0.1); --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
--font-heading: "Inter", sans-serif; --spacing-xs: 0.5rem;
--spacing-sm: 1rem;
--spacing-md: 1.5rem;
--spacing-lg: 2rem;
--spacing-xl: 3rem;
--spacing-xxl: 6rem; --z-header: 100;
--z-menu: 200;
--z-modal: 300;
--z-loading: 400; --transition-default: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
--transition-fast: 0.2s cubic-bezier(0.4, 0, 0.2, 1); --container-width: 1400px;
--content-width: 65ch;
--min-touch-target: 44px;
} *,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
} @media (prefers-reduced-motion: no-preference) {
html {
scroll-behavior: smooth;
}
}
@media (prefers-reduced-motion: reduce) {
html {
scroll-behavior: auto;
}
}
body {
background-color: var(--color-bg);
color: var(--color-text);
font-family: var(--font-body);
font-weight: 400;
line-height: 1.6;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
overflow-x: hidden;
min-height: 100vh;
} body.admin-bar {
padding-top: 32px;
}
@media screen and (max-width: 782px) {
body.admin-bar {
padding-top: 46px;
}
} .skip-link {
position: absolute;
top: -40px;
left: 6px;
background: var(--color-text);
color: var(--color-bg);
padding: 8px;
text-decoration: none;
z-index: 1000;
}
.skip-link:focus {
top: 6px;
} h1, h2, h3, h4, h5, h6 {
color: var(--color-text);
font-family: var(--font-heading);
letter-spacing: 0.02em;
margin-bottom: var(--spacing-md);
line-height: 1.2;
font-weight: 700;
}
h1 { font-size: clamp(2rem, 5vw, 3rem); }
h2 { font-size: clamp(1.5rem, 4vw, 2.25rem); }
h3 { font-size: clamp(1.25rem, 3vw, 1.75rem); }
h4 { font-size: clamp(1.125rem, 2.5vw, 1.5rem); }
h5 { font-size: clamp(1rem, 2vw, 1.25rem); }
h6 { font-size: clamp(0.875rem, 1.5vw, 1rem); }
p {
color: var(--color-text);
margin-bottom: var(--spacing-md);
}
a {
color: var(--color-text);
text-decoration: none;
transition: opacity var(--transition-fast);
}
a:hover,
a:focus-visible {
opacity: 0.7;
}
a:focus-visible {
outline: 2px solid var(--color-accent);
outline-offset: 2px;
} img, video, canvas {
max-width: 100%;
height: auto;
}
img, video, canvas, iframe, embed, object {
overflow: hidden !important;
} .site-container {
background: var(--color-bg);
min-height: 100vh;
position: relative;
} .site-header {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: var(--z-header);
padding: 30px 50px;
background: transparent;
}
.header-container {
display: flex;
justify-content: space-between;
align-items: center;
max-width: none;
margin: 0;
padding: 0;
}
.site-logo,
.site-title a {
font-size: clamp(0.875rem, 2vw, 1rem);
font-weight: 700;
color: var(--color-text);
text-decoration: none;
transition: opacity var(--transition-default);
font-family: var(--font-heading);
}
.site-logo:hover,
.site-title a:hover {
opacity: 0.8;
} .site-branding {
display: inline-flex;
align-items: center;
}
.site-identity {
display: inline-flex;
align-items: center;
gap: 12px;
text-decoration: none;
color: var(--color-text);
transition: opacity var(--transition-default);
}
.site-identity:hover {
opacity: 0.8;
} .site-name {
font-family: var(--font-heading);
font-weight: 700;
line-height: 1.2;
transition: font-size var(--transition-default);
}
.site-tagline {
font-family: var(--font-body);
color: var(--color-text-muted);
letter-spacing: 0.01em;
line-height: 1.3;
margin-top: 4px;
}
.site-text-group {
display: flex;
flex-direction: column;
gap: 2px;
} .site-logo-image,
.custom-logo {
height: auto;
width: auto;
display: block;
transition: max-height var(--transition-default);
}
.site-icon-image {
flex-shrink: 0;
object-fit: contain;
border-radius: 4px;
transition: all var(--transition-default);
} .site-branding--text_only .site-identity {
flex-direction: column;
align-items: flex-start;
gap: 4px;
}
.site-branding--logo_text .site-identity {
flex-direction: row;
gap: 12px;
}
.site-branding--logo_text_stacked .site-identity {
flex-direction: column;
align-items: center;
gap: 8px;
text-align: center;
}
.site-branding--icon_text .site-identity {
flex-direction: row;
align-items: center;
gap: 10px;
}  .logo-small .site-logo-image,
.logo-small .custom-logo {
max-height: 30px;
}
.logo-small .site-name {
font-size: 0.875rem;
}
.logo-small .site-tagline {
font-size: 0.7rem;
}
.logo-small .site-branding--icon_text .site-icon-image:not([style*="width"]) {
width: 20px;
height: 20px;
} .logo-medium .site-logo-image,
.logo-medium .custom-logo {
max-height: 40px;
}
.logo-medium .site-name {
font-size: 1rem;
}
.logo-medium .site-tagline {
font-size: 0.75rem;
}
.logo-medium .site-branding--icon_text .site-icon-image:not([style*="width"]) {
width: 28px;
height: 28px;
} .logo-large .site-logo-image,
.logo-large .custom-logo {
max-height: 50px;
}
.logo-large .site-name {
font-size: 1.125rem;
}
.logo-large .site-tagline {
font-size: 0.8rem;
}
.logo-large .site-branding--icon_text .site-icon-image:not([style*="width"]) {
width: 36px;
height: 36px;
} .logo-xlarge .site-logo-image,
.logo-xlarge .custom-logo {
max-height: 60px;
}
.logo-xlarge .site-name {
font-size: 1.25rem;
}
.logo-xlarge .site-tagline {
font-size: 0.875rem;
}
.logo-xlarge .site-branding--icon_text .site-icon-image:not([style*="width"]) {
width: 44px;
height: 44px;
}
.custom-logo-link {
line-height: 0;
display: inline-block;
} .site-main {
padding-top: 100px;
padding-bottom: 100px;
min-height: 100vh;
background: var(--color-bg);
} .site-content {
min-height: 50vh;
} .site-layout {
display: block;
background: var(--color-bg);
max-width: none;
padding: 0;
} .bg-pattern {
position: fixed;
inset: 0;
pointer-events: none;
opacity: 0.03;
z-index: 1;
background-image: 
repeating-linear-gradient(90deg, 
transparent, 
transparent 20%, 
rgba(255, 255, 255, 0.02) 20%, 
rgba(255, 255, 255, 0.02) 20.1%);
} .site-footer {
position: fixed;
bottom: 30px;
left: 50px;
right: 50px;
z-index: 100;
background: transparent;
border: none;
padding: 0;
margin: 0;
}
.footer-container {
max-width: none;
margin: 0;
padding: 0;
}
.footer-content {
display: flex;
justify-content: space-between;
align-items: baseline;
}
.footer-copyright {
font-size: 10px;
letter-spacing: 0.05em;
text-transform: uppercase;
opacity: 0.8;
color: var(--color-text);
}
.footer-copyright a {
color: inherit;
text-decoration: none;
}
.footer-tagline,
.footer-credits {
display: none;
}
.footer-links {
display: flex;
gap: 20px;
list-style: none;
padding: 0;
margin: 0;
}
.footer-link {
font-size: 11px;
letter-spacing: 0.05em;
text-transform: uppercase;
color: var(--color-text-muted);
text-decoration: none;
opacity: 0.4;
transition: opacity 0.3s;
}
.footer-link:hover {
opacity: 1;
} .entry-content {
color: var(--color-text);
}
.entry-content h1,
.entry-content h2,
.entry-content h3,
.entry-content h4,
.entry-content h5,
.entry-content h6 {
color: var(--color-text);
margin-top: var(--spacing-xl);
margin-bottom: var(--spacing-md);
}
.entry-content p {
color: var(--color-text);
max-width: var(--content-width);
}
.entry-content a {
color: var(--color-accent);
text-decoration: underline;
}
.entry-content a:hover {
opacity: 0.8;
}
.entry-content blockquote {
border-left: 3px solid var(--color-accent);
background: rgba(255, 255, 255, 0.05);
padding: var(--spacing-md) var(--spacing-lg);
margin: var(--spacing-lg) 0;
color: var(--color-text-muted);
}
.entry-content pre,
.entry-content code {
background: rgba(255, 255, 255, 0.05);
border: 1px solid var(--color-border);
color: var(--color-text);
}
.entry-content code {
padding: 2px 6px;
border-radius: 3px;
font-size: 0.9em;
}
.entry-content pre {
padding: var(--spacing-md);
overflow-x: auto;
border-radius: 4px;
} .single .site-main,
.page .site-main {
padding: calc(var(--spacing-xl) * 3) 50px var(--spacing-xl);
}
.entry-header {
margin-bottom: var(--spacing-xl);
}
.entry-title {
color: var(--color-text);
font-family: var(--font-heading);
letter-spacing: 0.02em;
margin-bottom: var(--spacing-md);
}
.entry-meta {
color: var(--color-text-muted);
font-size: 0.875rem;
display: flex;
flex-wrap: wrap;
gap: var(--spacing-sm);
}
.entry-meta a {
color: var(--color-text-muted);
text-decoration: none;
}
.entry-meta a:hover {
color: var(--color-text);
} .archive .page-header,
.search .page-header {
background: linear-gradient(135deg, rgba(255, 255, 255, 0.05), transparent);
padding: var(--spacing-xl) var(--spacing-lg);
margin-bottom: var(--spacing-xl);
border-bottom: 1px solid var(--color-border);
}
.archive-description {
color: var(--color-text-muted);
max-width: var(--content-width);
margin: var(--spacing-md) 0 0;
} input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="range"],
input[type="date"],
input[type="month"],
input[type="week"],
input[type="time"],
input[type="datetime"],
input[type="datetime-local"],
input[type="color"],
textarea,
select {
background: rgba(255, 255, 255, 0.05);
border: 1px solid var(--color-border);
color: var(--color-text);
padding: var(--spacing-sm);
border-radius: 4px;
font-family: var(--font-body);
width: 100%;
transition: all var(--transition-fast);
}
input[type="text"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="number"]:focus,
input[type="tel"]:focus,
input[type="range"]:focus,
input[type="date"]:focus,
input[type="month"]:focus,
input[type="week"]:focus,
input[type="time"]:focus,
input[type="datetime"]:focus,
input[type="datetime-local"]:focus,
input[type="color"]:focus,
textarea:focus,
select:focus {
background: rgba(255, 255, 255, 0.08);
border-color: var(--color-accent);
outline: none;
}
button,
input[type="submit"],
input[type="button"],
input[type="reset"],
.button {
background: var(--color-text);
color: var(--color-bg);
border: 2px solid var(--color-text);
padding: var(--spacing-sm) var(--spacing-md);
font-family: var(--font-heading);
font-weight: 700;
letter-spacing: 0.05em;
text-transform: uppercase;
cursor: pointer;
transition: all var(--transition-fast);
border-radius: 4px;
}
button:not(.menu-toggle):not(.nav-close),
input[type="submit"],
input[type="button"],
input[type="reset"],
.button {
background: var(--color-text);
color: var(--color-bg);
border: 2px solid var(--color-text);
padding: var(--spacing-sm) var(--spacing-md);
font-family: var(--font-heading);
font-weight: 700;
letter-spacing: 0.05em;
text-transform: uppercase;
cursor: pointer;
transition: all var(--transition-fast);
border-radius: 4px;
}
button:not(.menu-toggle):not(.nav-close):hover,
input[type="submit"]:hover,
input[type="button"]:hover,
input[type="reset"]:hover,
.button:hover {
background: transparent;
color: var(--color-text);
} .search-form {
display: flex;
gap: var(--spacing-sm);
}
.search-field {
flex: 1;
}
.search-submit {
flex: 0 0 auto;
} .comments-area {
margin-top: var(--spacing-xl);
padding-top: var(--spacing-xl);
border-top: 1px solid var(--color-border);
}
.comment-list {
list-style: none;
padding: 0;
}
.comment {
background: rgba(255, 255, 255, 0.02);
padding: var(--spacing-md);
margin-bottom: var(--spacing-md);
border-radius: 4px;
border: 1px solid var(--color-border);
}
.comment-author {
color: var(--color-text);
font-weight: 600;
}
.comment-metadata {
color: var(--color-text-muted);
font-size: 0.875rem;
}
.comment-content {
color: var(--color-text);
margin-top: var(--spacing-sm);
} .pagination,
.page-links,
.nav-links {
display: flex;
gap: var(--spacing-sm);
margin-top: var(--spacing-xl);
justify-content: center;
}
.page-numbers,
.page-link {
padding: var(--spacing-xs) var(--spacing-sm);
background: rgba(255, 255, 255, 0.05);
color: var(--color-text);
text-decoration: none;
border-radius: 4px;
transition: all var(--transition-fast);
}
.page-numbers:hover,
.page-link:hover {
background: rgba(255, 255, 255, 0.1);
} .alignnone {
margin: 5px 20px 20px 0;
}
.aligncenter,
div.aligncenter {
display: block;
margin: 5px auto 5px auto;
}
.alignright {
float: right;
margin: 5px 0 20px 20px;
}
.alignleft {
float: left;
margin: 5px 20px 20px 0;
}
a img.alignright {
float: right;
margin: 5px 0 20px 20px;
}
a img.alignnone {
margin: 5px 20px 20px 0;
}
a img.alignleft {
float: left;
margin: 5px 20px 20px 0;
}
a img.aligncenter {
display: block;
margin-left: auto;
margin-right: auto;
} .wp-caption {
background: rgba(255, 255, 255, 0.05);
border: 1px solid var(--color-border);
max-width: 96%;
padding: 5px 3px 10px;
text-align: center;
}
.wp-caption.alignnone {
margin: 5px 20px 20px 0;
}
.wp-caption.alignleft {
margin: 5px 20px 20px 0;
}
.wp-caption.alignright {
margin: 5px 0 20px 20px;
}
.wp-caption img {
border: 0 none;
height: auto;
margin: 0;
max-width: 98.5%;
padding: 0;
width: auto;
}
.wp-caption p.wp-caption-text {
font-size: 0.875rem;
line-height: 1.4;
margin: 0;
padding: 0 4px 5px;
color: var(--color-text-muted);
} .gallery {
margin-bottom: 1.5em;
display: grid;
grid-gap: 1.5em;
}
.gallery-item {
display: inline-block;
text-align: center;
width: 100%;
}
.gallery-columns-2 {
grid-template-columns: repeat(2, 1fr);
}
.gallery-columns-3 {
grid-template-columns: repeat(3, 1fr);
}
.gallery-columns-4 {
grid-template-columns: repeat(4, 1fr);
}
.gallery-columns-5 {
grid-template-columns: repeat(5, 1fr);
}
.gallery-columns-6 {
grid-template-columns: repeat(6, 1fr);
}
.gallery-columns-7 {
grid-template-columns: repeat(7, 1fr);
}
.gallery-columns-8 {
grid-template-columns: repeat(8, 1fr);
}
.gallery-columns-9 {
grid-template-columns: repeat(9, 1fr);
}
.gallery-caption {
display: block;
font-size: 0.875rem;
color: var(--color-text-muted);
} .visually-hidden,
.screen-reader-text {
position: absolute !important;
clip: rect(1px, 1px, 1px, 1px);
width: 1px !important;
height: 1px !important;
overflow: hidden;
white-space: nowrap;
}
.container {
max-width: var(--container-width);
margin: 0 auto;
padding: 0 var(--spacing-lg);
} @media (max-width: 768px) {
:root {
--spacing-lg: 1.5rem;
--spacing-xl: 2rem;
}
.site-header {
padding: 20px;
}
.site-footer {
bottom: 20px;
left: 20px;
right: 20px;
}
.site-main {
padding-top: 80px;
padding-bottom: 80px;
}
.single .site-main,
.page .site-main {
padding: 80px var(--spacing-md) 80px;
} .logo-small .site-logo-image,
.logo-small .custom-logo {
max-height: 25px;
}
.logo-medium .site-logo-image,
.logo-medium .custom-logo {
max-height: 32px;
}
.logo-large .site-logo-image,
.logo-large .custom-logo {
max-height: 40px;
}
.logo-xlarge .site-logo-image,
.logo-xlarge .custom-logo {
max-height: 48px;
} .logo-small .site-branding--icon_text .site-icon-image:not([style*="width"]) {
width: 18px;
height: 18px;
}
.logo-medium .site-branding--icon_text .site-icon-image:not([style*="width"]) {
width: 24px;
height: 24px;
}
.logo-large .site-branding--icon_text .site-icon-image:not([style*="width"]) {
width: 30px;
height: 30px;
}
.logo-xlarge .site-branding--icon_text .site-icon-image:not([style*="width"]) {
width: 36px;
height: 36px;
} .site-name {
font-size: 0.875rem;
}
.logo-large .site-name {
font-size: 1rem;
}
.logo-xlarge .site-name {
font-size: 1.125rem;
} .site-branding--logo_text .site-identity {
flex-direction: column;
gap: 6px;
text-align: center;
} .gallery-columns-3,
.gallery-columns-4,
.gallery-columns-5,
.gallery-columns-6,
.gallery-columns-7,
.gallery-columns-8,
.gallery-columns-9 {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 480px) {
.gallery-columns-2,
.gallery-columns-3,
.gallery-columns-4,
.gallery-columns-5,
.gallery-columns-6,
.gallery-columns-7,
.gallery-columns-8,
.gallery-columns-9 {
grid-template-columns: 1fr;
}
}
@media (max-width: 360px) {
.site-tagline {
display: none;
}
} .customize-preview .site-logo-image,
.customize-preview .custom-logo,
.customize-preview .site-icon-image,
.customize-preview .site-name {
transition: all 0.3s ease;
} @media print {
body {
background: white;
color: black;
}
.bg-pattern,
.site-header,
.site-footer,
.nav-links,
.comment-respond {
display: none;
}
} .footer-links a {
font-size: 11px;
letter-spacing: 0.05em;
text-transform: uppercase;
color: var(--color-text);
text-decoration: none;
opacity: 0.8;
transition: opacity 0.3s;
}
.footer-links a:hover {
opacity: 1;
}
.page .container,
.single .container {
max-width: none !important;
margin: 0 !important;
padding: 0 !important; }#portfolio-title {
font-size: clamp(1.5rem, 4vw, 2.5rem);
}
section h1 {
font-size: clamp(1.5rem, 4vw, 2.5rem);
}
.portfolio-section {
padding: 0 50px;
max-width: none;
margin: 0;
}
.portfolio-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: var(--spacing-xl);
margin-top: var(--spacing-xl);
}
.portfolio-item {
opacity: 0;
transform: translateY(20px);
animation: fadeInUp 0.8s forwards;
animation-delay: calc(var(--item-index, 0) * 0.1s);
}
@keyframes fadeInUp {
to {
opacity: 1;
transform: translateY(0);
}
}
.portfolio-link {
display: block;
text-decoration: none;
color: inherit;
transition: transform var(--transition-default);
position: relative;
overflow: hidden;
border-radius: 4px;
}
.portfolio-link:hover,
.portfolio-link:focus {
transform: scale(0.98);
}
.portfolio-link:focus {
outline: 2px solid var(--color-accent);
outline-offset: 4px;
}
.portfolio-image {
aspect-ratio: 16 / 9;
background: linear-gradient(135deg, #1a1a1a, #2a2a2a);
border: 1px solid var(--color-border);
border-radius: 4px;
position: relative;
overflow: hidden;
}
.portfolio-image::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(135deg, transparent, rgba(255, 255, 255, 0.05));
opacity: 0;
transition: opacity var(--transition-default);
}
.portfolio-link:hover .portfolio-image::after,
.portfolio-link:focus .portfolio-image::after {
opacity: 1;
} .portfolio-thumb {
width: 100%;
height: 100%;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.portfolio-item img {
width: 100%;
height: 100%;
object-fit: cover;
}
.portfolio-number {
position: absolute;
top: var(--spacing-sm);
right: var(--spacing-sm);
font-size: 0.75rem;
font-weight: 500;
color: var(--color-text-muted);
background: rgba(10, 10, 10, 0.8);
padding: 0.25rem 0.5rem;
border-radius: 2px;
font-family: "Inter", sans-serif;
letter-spacing: 0.05em;
}
.portfolio-content {
padding-top: var(--spacing-md);
}
.portfolio-category {
font-size: 0.75rem;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--color-text-muted);
margin-bottom: var(--spacing-xs);
font-family: "Inter", sans-serif;
}
.portfolio-title {
font-size: clamp(1.125rem, 2vw, 1.25rem);
font-weight: 700;
line-height: 1.2;
margin-bottom: 0.25rem;
color: var(--color-text);
font-family: "Inter", sans-serif;
letter-spacing: 0.02em;
}
.portfolio-subtitle {
font-size: 0.875rem;
color: var(--color-text-muted);
line-height: 1.4;
} .archive .portfolio-grid,
.category .portfolio-grid,
.tag .portfolio-grid {
margin-top: var(--spacing-lg);
}
.archive .portfolio-section,
.category .portfolio-section,
.tag .portfolio-section {
padding-top: var(--spacing-xl);
} .portfolio-pagination {
margin-top: calc(var(--spacing-xl) * 2);
padding-top: var(--spacing-xl);
border-top: 1px solid var(--color-border);
display: flex;
justify-content: center;
gap: var(--spacing-sm);
}
.portfolio-pagination a,
.portfolio-pagination span {
padding: var(--spacing-xs) var(--spacing-sm);
color: var(--color-text-muted);
text-decoration: none;
transition: all var(--transition-default);
font-family: "Inter", sans-serif;
font-size: 1.1rem;
letter-spacing: 0.05em;
}
.portfolio-pagination a:hover,
.portfolio-pagination a:focus {
color: var(--color-text);
background: rgba(255, 255, 255, 0.05);
}
.portfolio-pagination .current {
color: var(--color-text);
background: rgba(255, 255, 255, 0.1);
} @media (max-width: 768px) {
.portfolio-section {
padding: 0 20px;
}
.portfolio-grid {
grid-template-columns: 1fr;
gap: var(--spacing-lg);
}
.portfolio-link:hover,
.portfolio-link:focus {
transform: none;
}
.portfolio-link:active {
transform: scale(0.98);
}
}
@media (min-width: 769px) and (max-width: 1024px) {
.portfolio-grid {
grid-template-columns: repeat(2, 1fr);
}
} @media (prefers-reduced-motion: reduce) {
.portfolio-item {
opacity: 1;
transform: none;
animation: none;
}
.portfolio-link,
.portfolio-image::after {
transition: none;
}
} @media print {
.portfolio-grid {
grid-template-columns: repeat(2, 1fr);
gap: 1rem;
}
.portfolio-link {
break-inside: avoid;
}
.portfolio-number {
display: none;
}
}