:root {
--color-primary: #ffffff;
--color-secondary: #1a1a1a;
--color-accent: #8b2635;
--color-text: #ffffff;
--color-text-dark: #1a1a1a;
--color-overlay: rgba(0, 0, 0, 0.4);
--font-family-heading: 'Caveat', cursive;
--font-family-body: 'Anonymous Pro', monospace;
--font-size-heading: 48px;
--font-size-body: 20px;
--font-size-sm: 16px;
--font-size-lg: 24px;
--font-size-xl: 36px;
--font-size-xxl: 48px;
--line-height: 1.6;
--spacing-xs: 8px;
--spacing-sm: 16px;
--spacing-md: 24px;
--spacing-lg: 32px;
--spacing-xl: 48px;
--spacing-xxl: 80px;
--container-max-width: 1400px;
--header-height: 80px;
--transition-fast: 0.3s ease;
--transition-normal: 0.5s ease;
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: var(--font-size-body); }
body {
font-family: var(--font-family-body);
font-size: var(--font-size-body);
line-height: var(--line-height);
color: var(--color-text);
background-color: var(--color-secondary);
overflow-x: hidden;
}
.container {
width: 100%;
max-width: var(--container-max-width);
margin: 0 auto;
padding: 0 var(--spacing-md);
}
/* Header - Base Styles */
.header {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: var(--header-height);
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(10px);
z-index: 1000;
padding: var(--spacing-sm) 0;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
transition: all var(--transition-fast);
}
.header__container {
display: flex;
justify-content: space-between;
align-items: center;
height: 100%;
}
.header__logo {
display: flex;
flex-direction: column;
z-index: 1001;
}
.header__logo-title {
font-family: var(--font-family-heading);
font-size: var(--font-size-lg);
font-weight: 600;
color: var(--color-secondary);
line-height: 1.2;
}
.header__logo-name {
font-family: var(--font-family-heading);
font-size: var(--font-size-heading);
font-weight: 700;
color: var(--color-secondary);
line-height: 1.2;
}
/* Hero - Transparent Header */
.hero .header {
background: transparent;
box-shadow: none;
backdrop-filter: none;
}
.hero .header__logo-title,
.hero .header__logo-name,
.hero .burger__line {
color: var(--color-primary);
background-color: var(--color-primary);
}
/* Burger */
.burger {
display: flex;
flex-direction: column;
justify-content: space-between;
width: 30px;
height: 21px;
background: transparent;
border: none;
cursor: pointer;
padding: 0;
z-index: 1001;
transition: var(--transition-fast);
}
.burger__line {
display: block;
width: 100%;
height: 2px;
background-color: var(--color-secondary);
transition: var(--transition-fast);
transform-origin: center;
}
.burger--active .burger__line:nth-child(1) {
transform: translateY(9.5px) rotate(45deg);
background-color: var(--color-primary);
}
.burger--active .burger__line:nth-child(2) { opacity: 0; }
.burger--active .burger__line:nth-child(3) {
transform: translateY(-9.5px) rotate(-45deg);
background-color: var(--color-primary);
}
/* Navigation */
.nav {
position: fixed;
top: 0;
right: -100%;
width: 100%;
max-width: 300px;
height: 100vh;
background-color: rgba(26, 26, 26, 0.98);
padding: calc(var(--header-height) + var(--spacing-lg)) var(--spacing-lg);
transition: right var(--transition-normal);
z-index: 1000;
overflow-y: auto;
}
.nav--active { right: 0; }
.nav__list {
display: flex;
flex-direction: column;
gap: var(--spacing-md);
}
.nav__item {
opacity: 0;
transform: translateX(20px);
transition: opacity var(--transition-normal), transform var(--transition-normal);
}
.nav--active .nav__item {
opacity: 1;
transform: translateX(0);
}
.nav--active .nav__item:nth-child(1) { transition-delay: 0.1s; }
.nav--active .nav__item:nth-child(2) { transition-delay: 0.2s; }
.nav--active .nav__item:nth-child(3) { transition-delay: 0.3s; }
.nav--active .nav__item:nth-child(4) { transition-delay: 0.4s; }
.nav__link {
font-family: var(--font-family-heading);
font-size: var(--font-size-xl);
font-weight: 500;
color: var(--color-primary);
text-decoration: none;
transition: color var(--transition-fast);
display: block;
padding: var(--spacing-xs) 0;
}
.nav__link:hover, .nav__link:focus {
color: var(--color-accent);
outline: none;
}
.nav__link--active { color: var(--color-accent); }
/* Hero Section */
.hero {
position: relative;
min-height: 100vh;
width: 100%;
display: flex;
align-items: flex-end;
padding: var(--spacing-xxl) 0;
overflow: hidden;
}
.hero__bg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
}
.hero__bg-image {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
display: block;
}
.hero__overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: var(--color-overlay);
z-index: 0;
}
.hero__container {
position: relative;
z-index: 1;
width: 100%;
}
.hero__content { max-width: 800px; }
.hero__text {
font-family: var(--font-family-body);
font-size: var(--font-size-body);
line-height: 1.8;
color: var(--color-primary);
margin-bottom: var(--spacing-md);
opacity: 0;
animation: fadeInUp 1s ease forwards;
}
.hero__text:nth-child(1) { animation-delay: 0.3s; }
.hero__text:nth-child(2) { animation-delay: 0.5s; }
@keyframes fadeInUp {
from { opacity: 0; transform: translateY(30px); }
to { opacity: 1; transform: translateY(0); }
}
/* Sections Base */
.welcome, .about, .services, .contacts,
.services-page, .portfolio-page, .contacts-page,
.wedding-portfolio-page, .studio-portfolio-page, .portrait-portfolio-page {
padding: var(--spacing-xxl) 0;
background-color: var(--color-primary);
color: var(--color-text-dark);
}
.portfolio {
padding: var(--spacing-xxl) 0;
background-color: var(--color-secondary);
color: var(--color-text);
}
/* Titles */
.welcome__title, .about__title, .services__title, .contacts__title,
.services-page__title, .portfolio-page__title, .contacts-page__title,
.wedding-portfolio-page__title, .studio-portfolio-page__title, .portrait-portfolio-page__title {
font-family: var(--font-family-heading);
font-size: var(--font-size-xxl);
font-weight: 700;
text-align: center;
margin-bottom: var(--spacing-xl);
color: var(--color-text-dark);
}
/* Welcome */
.welcome__text {
max-width: 900px;
margin: 0 auto var(--spacing-xxl);
text-align: center;
line-height: 1.8;
font-size: var(--font-size-sm);
}
.welcome__grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--spacing-lg);
align-items: start;
}
.welcome__card {
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
}
.welcome__card-image {
width: 100%;
max-width: 400px;
height: 300px;
overflow: hidden;
margin-bottom: var(--spacing-md);
}
.welcome__img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
transition: transform var(--transition-normal);
display: block;
}
.welcome__card:hover .welcome__img { transform: scale(1.05); }
.welcome__card-title {
font-family: var(--font-family-body);
font-size: var(--font-size-sm);
text-align: center;
color: var(--color-text-dark);
font-weight: 400;
}
/* About */
.about__grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--spacing-lg);
align-items: center;
}
.about__image-wrapper {
border-radius: 40px;
overflow: hidden;
height: 500px;
margin: 0;
}
.about__image-wrapper--left { border-radius: 0 40px 40px 0; }
.about__image-wrapper--right { border-radius: 40px 0 0 40px; }
.about__img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
display: block;
}
.about__content { padding: 0 var(--spacing-sm); }
.about__text {
font-family: var(--font-family-body);
font-size: var(--font-size-sm);
line-height: 1.8;
margin-bottom: var(--spacing-md);
color: var(--color-text-dark);
}
.about__text:last-child { margin-bottom: 0; }
/* Portfolio Grid */
.portfolio__grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--spacing-sm);
grid-auto-rows: 250px;
}
.portfolio__item {
position: relative;
overflow: hidden;
border-radius: 20px;
cursor: pointer;
}
.portfolio__item--large { grid-row: span 2; }
.portfolio__item--wide { grid-column: span 1; }
.portfolio__img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform var(--transition-normal);
display: block;
}
.portfolio__item:hover .portfolio__img { transform: scale(1.05); }
/* Services Grid */
.services__grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--spacing-xl);
justify-items: center;
}
.services__card {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
max-width: 300px;
}
.services__image-wrapper {
width: 280px;
height: 280px;
border-radius: 50%;
overflow: hidden;
margin-bottom: var(--spacing-md);
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
transition: transform var(--transition-normal);
}
.services__card:hover .services__image-wrapper { transform: scale(1.05); }
.services__img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
display: block;
}
.services__card-title {
font-family: var(--font-family-heading);
font-size: var(--font-size-lg);
font-weight: 600;
margin-bottom: var(--spacing-sm);
color: var(--color-text-dark);
}
.services__price {
font-family: var(--font-family-body);
font-size: var(--font-size-sm);
color: var(--color-text-dark);
font-weight: 400;
line-height: 1.6;
}
/* Contacts Grid */
.contacts__grid, .contacts-page__social {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--spacing-lg);
justify-items: center;
max-width: 600px;
margin: 0 auto;
}
.contacts__item, .contacts-page__item {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
.contacts__icon-img, .contacts-page__icon {
width: 80px;
height: 80px;
object-fit: contain;
margin-bottom: var(--spacing-sm);
display: block;
}
.contacts__label, .contacts-page__label {
font-family: var(--font-family-body);
font-size: var(--font-size-sm);
color: var(--color-text-dark);
font-weight: 400;
}
.contacts-page__phone {
text-align: center;
margin-top: var(--spacing-xl);
}
.contacts-page__phone-label {
font-family: var(--font-family-body);
font-size: var(--font-size-lg);
font-weight: 600;
color: var(--color-text-dark);
margin-right: var(--spacing-sm);
}
.contacts-page__phone-number {
font-family: var(--font-family-body);
font-size: var(--font-size-xxl);
font-weight: 700;
color: var(--color-text-dark);
letter-spacing: 2px;
}
/* Footer */
.footer {
padding: var(--spacing-xl) 0 var(--spacing-lg);
background-color: #4a4a4a;
color: var(--color-primary);
text-align: center;
}
.footer__text, .footer__policy {
font-family: var(--font-family-body);
font-size: var(--font-size-sm);
color: var(--color-primary);
line-height: 1.6;
margin-bottom: var(--spacing-md);
}
/* Internal Pages */
.portfolio-page, .services-page, .contacts-page,
.wedding-portfolio-page, .studio-portfolio-page, .portrait-portfolio-page {
padding: calc(var(--spacing-xxl) + var(--header-height)) 0 var(--spacing-xxl);
min-height: 100vh;
}
.portfolio-page__grid, .services-page__grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--spacing-xl);
justify-items: center;
max-width: 1000px;
margin: 0 auto;
}
.portfolio-page__card {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
width: 100%;
max-width: 400px;
}
.portfolio-page__image-wrapper {
width: 100%;
max-width: 400px;
height: 300px;
border-radius: 30px;
overflow: hidden;
margin-bottom: var(--spacing-md);
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
transition: transform var(--transition-normal);
}
.portfolio-page__card:hover .portfolio-page__image-wrapper { transform: scale(1.05); }
.portfolio-page__img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
display: block;
}
.portfolio-page__title {
font-family: var(--font-family-body);
font-size: var(--font-size-sm);
color: var(--color-text-dark);
line-height: 1.6;
}
.services-page__subtitle {
font-family: var(--font-family-heading);
font-size: var(--font-size-lg);
text-align: center;
margin-bottom: var(--spacing-xxl);
color: var(--color-text-dark);
font-weight: 400;
}
.services-page__card {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
max-width: 400px;
margin: 0 auto;
}
.services-page__image-wrapper {
width: 100%;
max-width: 400px;
height: 500px;
border-radius: 30px;
overflow: hidden;
margin-bottom: var(--spacing-lg);
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
transition: transform var(--transition-normal);
}
.services-page__card:hover .services-page__image-wrapper { transform: scale(1.02); }
.services-page__img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
display: block;
}
.services-page__card-title {
font-family: var(--font-family-heading);
font-size: var(--font-size-xl);
font-weight: 700;
margin-bottom: var(--spacing-sm);
color: var(--color-text-dark);
line-height: 1.3;
}
.services-page__price {
font-family: var(--font-family-body);
font-size: var(--font-size-lg);
font-weight: 600;
color: var(--color-text-dark);
margin-bottom: var(--spacing-md);
}
.services-page__description {
font-family: var(--font-family-body);
font-size: var(--font-size-sm);
line-height: 1.6;
color: var(--color-text-dark);
text-align: left;
}
.services-page__description p { margin-bottom: var(--spacing-sm); }
.services-page__list {
list-style: disc;
padding-left: var(--spacing-lg);
margin-bottom: var(--spacing-sm);
}
.services-page__list li {
list-style: disc;
margin-bottom: var(--spacing-xs);
}
.services-page__cta {
text-align: center;
margin-top: var(--spacing-xxl);
}
.services-page__button {
display: inline-block;
font-family: var(--font-family-heading);
font-size: var(--font-size-xxl);
font-weight: 700;
color: var(--color-text-dark);
text-decoration: none;
padding: var(--spacing-md) var(--spacing-xl);
border: 3px solid var(--color-text-dark);
border-radius: 50px;
transition: all var(--transition-fast);
}
.services-page__button:hover {
background-color: var(--color-text-dark);
color: var(--color-primary);
}
/* Portfolio Category Pages */
.wedding-portfolio-page__grid,
.studio-portfolio-page__grid,
.portrait-portfolio-page__grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--spacing-md);
max-width: 1200px;
margin: 0 auto var(--spacing-xxl);
}
.wedding-portfolio-page__item,
.studio-portfolio-page__item,
.portrait-portfolio-page__item {
position: relative;
overflow: hidden;
border-radius: 20px;
}
.wedding-portfolio-page__item--tall { grid-row: span 2; }
.portrait-portfolio-page__item--tall { grid-row: span 2; }
.portrait-portfolio-page__item--small { height: 250px; }
.portrait-portfolio-page__item--medium { height: 350px; }
.studio-portfolio-page__item--tall { grid-row: span 2; }
.studio-portfolio-page__item--portrait-color { height: 400px; }
.studio-portfolio-page__item--bw-circle { height: 400px; }
.studio-portfolio-page__item--table { height: 350px; }
.studio-portfolio-page__item--wide-chair { grid-row: span 2; }
.studio-portfolio-page__item--shadow { height: 500px; }
.wedding-portfolio-page__img,
.studio-portfolio-page__img,
.portrait-portfolio-page__img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
display: block;
transition: transform var(--transition-normal);
}
.wedding-portfolio-page__item:hover .wedding-portfolio-page__img,
.studio-portfolio-page__item:hover .studio-portfolio-page__img,
.portrait-portfolio-page__item:hover .portrait-portfolio-page__img {
transform: scale(1.03);
}
.wedding-portfolio-page__categories,
.studio-portfolio-page__categories,
.portrait-portfolio-page__categories {
display: grid;
grid-template-columns: 1fr;
gap: var(--spacing-lg);
max-width: 800px;
margin: 0 auto;
}
.wedding-portfolio-page__category,
.studio-portfolio-page__category,
.portrait-portfolio-page__category {
display: flex;
flex-direction: column;
align-items: center;
text-decoration: none;
transition: transform var(--transition-fast);
}
.wedding-portfolio-page__category:hover,
.studio-portfolio-page__category:hover,
.portrait-portfolio-page__category:hover {
transform: translateY(-5px);
}
.wedding-portfolio-page__category-image,
.studio-portfolio-page__category-image,
.portrait-portfolio-page__category-image {
width: 100%;
max-width: 350px;
height: 350px;
border-radius: 30px;
overflow: hidden;
margin-bottom: var(--spacing-md);
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}
.wedding-portfolio-page__category-img,
.studio-portfolio-page__category-img,
.portrait-portfolio-page__category-img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
display: block;
}
.wedding-portfolio-page__category-title,
.studio-portfolio-page__category-title,
.portrait-portfolio-page__category-title {
font-family: var(--font-family-body);
font-size: var(--font-size-sm);
color: var(--color-text-dark);
text-align: center;
line-height: 1.5;
text-decoration: none;
}
/* Tablet 768px */
@media (min-width: 768px) {
:root { --header-height: 100px; }
.header__logo-title { font-size: var(--font-size-xl); }
.header__logo-name { font-size: var(--font-size-heading); }
.hero__text { font-size: var(--font-size-body); }
.welcome__grid { grid-template-columns: repeat(2, 1fr); }
.welcome__card:nth-child(3) { grid-column: span 1; justify-self: center; }
.welcome__card-image { height: 350px; }
.welcome__text { font-size: var(--font-size-body); }
.about__grid { grid-template-columns: 1fr 1.5fr; }
.about__image-wrapper--right { display: none; }
.about__text { font-size: var(--font-size-body); }
.about__content { padding: 0 var(--spacing-lg); }
.portfolio__grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 300px; gap: var(--spacing-md); }
.portfolio__item--wide { grid-column: span 2; }
.services__grid { grid-template-columns: repeat(3, 1fr); gap: var(--spacing-lg); }
.services__image-wrapper { width: 300px; height: 300px; }
.portfolio-page__grid { grid-template-columns: repeat(2, 1fr); gap: var(--spacing-lg); }
.portfolio-page__card:nth-child(3) { grid-column: span 1; justify-self: center; }
.portfolio-page__image-wrapper { height: 350px; }
.services-page__grid { grid-template-columns: repeat(2, 1fr); gap: var(--spacing-lg); }
.services-page__image-wrapper { height: 550px; }
.services-page__card-title { font-size: var(--font-size-xxl); }
.services-page__description { font-size: var(--font-size-body); }
.contacts-page__icon { width: 100px; height: 100px; }
.contacts-page__label { font-size: var(--font-size-body); }
.wedding-portfolio-page__grid,
.studio-portfolio-page__grid,
.portrait-portfolio-page__grid { grid-template-columns: repeat(2, 1fr); gap: var(--spacing-lg); }
.wedding-portfolio-page__item--wide { grid-column: span 2; }
.wedding-portfolio-page__categories,
.studio-portfolio-page__categories,
.portrait-portfolio-page__categories { grid-template-columns: repeat(2, 1fr); }
.wedding-portfolio-page__category-image,
.studio-portfolio-page__category-image,
.portrait-portfolio-page__category-image { height: 400px; }
.portrait-portfolio-page__item--tall { height: auto; }
.portrait-portfolio-page__item--small { height: 300px; }
.portrait-portfolio-page__item--medium { height: 400px; }
.studio-portfolio-page__item--tall { height: 600px; }
.studio-portfolio-page__item--portrait-color { height: 450px; }
.studio-portfolio-page__item--bw-circle { height: 450px; }
.studio-portfolio-page__item--table { height: 400px; }
.studio-portfolio-page__item--wide-chair { height: 650px; }
.studio-portfolio-page__item--shadow { height: 600px; }
}
/* Desktop 1024px */
@media (min-width: 1024px) {
.burger { display: none; }
.nav { position: static; width: auto; max-width: none; height: auto; background: transparent; padding: 0; overflow: visible; }
.nav__list { flex-direction: row; gap: var(--spacing-lg); }
.nav__item { opacity: 1; transform: none; }
.nav__link { font-size: var(--font-size-lg); padding: var(--spacing-xs) var(--spacing-sm); color: var(--color-secondary); }
.nav__link:hover, .nav__link:focus { color: var(--color-accent); }
.hero .nav__link { color: var(--color-primary); }
.hero .nav__link:hover, .hero .nav__link:focus { color: var(--color-accent); }
.welcome__grid { grid-template-columns: repeat(3, 1fr); }
.welcome__card:nth-child(3) { grid-column: auto; }
.welcome__card-image { height: 380px; }
.about__grid { grid-template-columns: 1fr 1.2fr 1fr; gap: 0; }
.about__image-wrapper { height: 600px; margin: 0; }
.about__image-wrapper--left { border-radius: 0 40px 40px 0; }
.about__image-wrapper--right { display: block; border-radius: 40px 0 0 40px; }
.about__content { padding: 0 var(--spacing-xl); }
.portfolio__grid { grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 350px); gap: var(--spacing-lg); }
.portfolio__item--large { grid-column: 1; grid-row: 1 / 3; }
.portfolio__item:nth-child(2) { grid-column: 2; grid-row: 1; }
.portfolio__item:nth-child(3) { grid-column: 3; grid-row: 1; }
.portfolio__item--wide { grid-column: 2; grid-row: 2; }
.portfolio__item:nth-child(5) { grid-column: 3; grid-row: 2; }
.services__image-wrapper { width: 320px; height: 320px; }
.services__card-title { font-size: var(--font-size-xl); }
.services__price { font-size: var(--font-size-body); }
.portfolio-page__grid { grid-template-columns: repeat(3, 1fr); max-width: 1200px; }
.portfolio-page__card:nth-child(3) { grid-column: auto; }
.portfolio-page__image-wrapper { height: 380px; }
.portfolio-page__title { font-size: var(--font-size-body); }
.services-page__grid { grid-template-columns: repeat(3, 1fr); max-width: 1400px; }
.services-page__card:nth-child(3) { grid-column: auto; }
.services-page__image-wrapper { height: 600px; }
.services-page__button { font-size: 48px; padding: var(--spacing-lg) var(--spacing-xxl); }
.contacts-page__phone-label { font-size: var(--font-size-xl); }
.contacts-page__phone-number { font-size: 48px; }
.header--white .nav__link { color: var(--color-secondary); }
.header--white .nav__link:hover, .header--white .nav__link:focus { color: var(--color-accent); }
.header--white .nav__link--active { color: var(--color-accent); }
.wedding-portfolio-page__grid,
.studio-portfolio-page__grid,
.portrait-portfolio-page__grid { grid-template-columns: repeat(3, 1fr); gap: var(--spacing-xl); }
.wedding-portfolio-page__item--tall { grid-row: span 2; }
.wedding-portfolio-page__item--wide { grid-column: span 2; }
.wedding-portfolio-page__category-image,
.studio-portfolio-page__category-image,
.portrait-portfolio-page__category-image { height: 450px; }
.wedding-portfolio-page__category-title,
.studio-portfolio-page__category-title,
.portrait-portfolio-page__category-title { font-size: var(--font-size-body); }
.studio-portfolio-page__item--tall { grid-row: span 2; height: auto; }
.studio-portfolio-page__item--portrait-color { height: 350px; }
.studio-portfolio-page__item--bw-circle { height: 350px; }
.studio-portfolio-page__item--table { height: 300px; }
.studio-portfolio-page__item--wide-chair { grid-row: span 2; height: auto; }
.studio-portfolio-page__item--shadow { height: auto; }
.portrait-portfolio-page__item--tall { grid-row: span 2; height: auto; }
.portrait-portfolio-page__item--small { height: 300px; }
.portrait-portfolio-page__item--medium { height: 400px; }
.portrait-portfolio-page__item--medium-vertical { height: 450px; }
.portrait-portfolio-page__item--tall-bw { grid-row: span 2; height: auto; }
.portrait-portfolio-page__item--tall-color { height: auto; }
}
/* Large Desktop 1440px */
@media (min-width: 1440px) {
.container { padding: 0 var(--spacing-xl); }
}
/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
html { scroll-behavior: auto; }
}