.catalog-section {
padding: var(--space-4xl) 0;
}
.catalog-section .container {
max-width: var(--container-max);
padding: 0 var(--container-padding);
}
.catalog-grid {
display: grid;
grid-template-columns: repeat(12, 1fr);
grid-template-rows: repeat(3, minmax(180px, auto));
gap: var(--space-md);
} .catalog-grid .card--large {
grid-column: 1 / 8;
grid-row: 1 / 3;
min-height: 420px;
}
.catalog-grid .card--large .card-image {
aspect-ratio: 16/11;
}
.catalog-grid .card--medium:nth-of-type(2) {
grid-column: 8 / 13;
grid-row: 1 / 2;
min-height: 200px;
}
.catalog-grid .card--medium:nth-of-type(3) {
grid-column: 8 / 13;
grid-row: 2 / 3;
min-height: 200px;
}
.catalog-grid .card--small:nth-of-type(4) {
grid-column: 1 / 7;
grid-row: 3 / 4;
min-height: 280px;
}
.catalog-grid .card--small:nth-of-type(5) {
grid-column: 7 / 13;
grid-row: 3 / 4;
min-height: 280px;
} .catalog-grid .card--large:nth-of-type(6) {
grid-column: 6 / 13;
grid-row: 4 / 6;
}
.catalog-grid .card--medium:nth-of-type(7) {
grid-column: 1 / 6;
grid-row: 4 / 5;
}
.catalog-grid .card--medium:nth-of-type(8) {
grid-column: 1 / 6;
grid-row: 5 / 6;
}
.catalog-grid .card--small:nth-of-type(9) {
grid-column: 1 / 7;
grid-row: 6 / 7;
}
.catalog-grid .card--small:nth-of-type(10) {
grid-column: 7 / 13;
grid-row: 6 / 7;
} .catalog-grid .card {
opacity: 0;
}
.catalog-grid .card.is-visible {
opacity: 1;
transition: 0.6s ease;
} @media (max-width: 1199px) {
.catalog-grid {
grid-template-columns: repeat(2, 1fr);
grid-template-rows: auto;
}
.catalog-grid .card--large {
grid-column: 1 / -1;
grid-row: auto;
min-height: 350px;
}
.catalog-grid .card--medium,
.catalog-grid .card--small {
grid-column: span 1;
grid-row: auto;
min-height: 250px;
}
.catalog-grid .card--medium:nth-of-type(2),
.catalog-grid .card--medium:nth-of-type(3),
.catalog-grid .card--small:nth-of-type(4),
.catalog-grid .card--small:nth-of-type(5) {
grid-column: span 1;
grid-row: auto;
}
} @media (max-width: 767px) {
.catalog-section .container {
padding: 0 var(--space-md);
}
.catalog-grid {
grid-template-columns: 1fr;
gap: var(--space-md);
}
.catalog-grid .card--large,
.catalog-grid .card--medium,
.catalog-grid .card--small {
grid-column: span 1;
min-height: 50vw!important;
}
} .video-reel-section {
padding: var(--space-3xl) 0;
overflow: hidden;
}
.video-reel {
position: relative;
cursor: grab;
user-select: none;
}
.video-reel.is-dragging {
cursor: grabbing;
}
.video-reel-track {
display: flex;
gap: var(--space-md);
will-change: transform;
}
.video-reel-item {
position: relative;
flex-shrink: 0;
height: 300px;
border-radius: var(--border-radius);
overflow: hidden;
border: 1px solid transparent;
transition: border-color var(--transition-fast), transform var(--transition-fast);
cursor: pointer;
}
.video-reel-item:hover {
border-color: var(--text-accent);
transform: scale(1.02);
}
.video-reel-item video {
height: 100%;
width: auto;
object-fit: cover;
pointer-events: none;
} .video-reel-play {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scale(0.8);
width: 64px;
height: 64px;
display: flex;
align-items: center;
justify-content: center;
background: rgba(255, 255, 255, 0.15);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.3);
border-radius: 50%;
color: var(--text-primary);
opacity: 0;
transition: all var(--transition-base);
pointer-events: none;
}
.video-reel-item:hover .video-reel-play {
opacity: 1;
transform: translate(-50%, -50%) scale(1);
}
.video-reel-play svg {
width: 24px;
height: 24px;
margin-left: 3px;
}
@media (max-width: 767px) {
.video-reel-section {
padding: var(--space-2xl) 0;
}
.video-reel-item {
height: 200px;
}
.video-reel-play {
width: 48px;
height: 48px;
}
.video-reel-play svg {
width: 18px;
height: 18px;
}
}