.wog-layout-compact {
gap: 14px;
}
.wog-layout-compact .wog-item {
border-radius: 10px;
box-shadow: 0 3px 14px rgba(70, 45, 30, .1);
}
.wog-layout-compact .wog-image {
aspect-ratio: 1 / 1;
}
.wog-layout-compact .wog-title,
.wog-layout-compact .wog-caption {
margin-left: 12px;
margin-right: 12px;
}
.wog-layout-compact .wog-description {
margin: 10px 12px 14px;
font-size: .92rem;
line-height: 1.5;
}
.wog-layout-panorama {
display: flex;
overflow-x: auto;
scroll-snap-type: x mandatory;
gap: 22px;
padding: 4px 3px 20px;
}
.wog-layout-panorama .wog-item {
flex: 0 0 min(78vw, 560px);
scroll-snap-align: start;
}
.wog-layout-panorama .wog-image {
aspect-ratio: 16 / 9;
}
.wog-layout-panorama::-webkit-scrollbar {
height: 10px;
}
.wog-layout-panorama::-webkit-scrollbar-thumb {
background: #c8a98f;
border-radius: 10px;
}
@media (max-width: 560px) {
.wog-layout-panorama .wog-item {
flex-basis: 88vw;
}
}
.wog-layout-tiles { grid-auto-flow: dense; }
.wog-layout-tiles .wog-item:nth-child(6n + 1),
.wog-layout-tiles .wog-item:nth-child(6n + 4) { grid-column: span 2; }
.wog-layout-tiles .wog-item:nth-child(6n + 1) .wog-image,
.wog-layout-tiles .wog-item:nth-child(6n + 4) .wog-image { aspect-ratio: 2 / 1; }
.wog-layout-magazine { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.wog-layout-magazine .wog-item:first-child { grid-row: span 2; }
.wog-layout-magazine .wog-item:first-child .wog-image { aspect-ratio: auto; min-height: 520px; height: 100%; }
.wog-layout-magazine .wog-item:not(:first-child) .wog-image { aspect-ratio: 16 / 9; }
.wog-layout-polaroid { padding: 22px 12px; gap: 38px; }
.wog-layout-polaroid .wog-item {
--wog-card-rotation: -1.8deg;
--wog-text-rotation: 1.8deg;
border: 10px solid #fff;
border-bottom-width: 22px;
border-radius: 3px;
overflow: visible;
transform: rotate(var(--wog-card-rotation));
transform-origin: 50% 50%;
}
.wog-layout-polaroid .wog-item:nth-child(even) {
--wog-card-rotation: 1.8deg;
--wog-text-rotation: -1.8deg;
}
.wog-layout-polaroid .wog-item:nth-child(3n) {
--wog-card-rotation: -1deg;
--wog-text-rotation: 1deg;
}
.wog-layout-polaroid .wog-item:hover {
transform: translateY(-4px) rotate(var(--wog-card-rotation));
}
.wog-layout-polaroid .wog-text {
rotate: var(--wog-text-rotation);
transform-origin: center;
}
.wog-layout-minimal { gap: 38px 26px; }
.wog-layout-minimal .wog-item { border: 0; border-radius: 0; box-shadow: none; background: transparent; }
.wog-layout-minimal .wog-item:hover { transform: none; box-shadow: none; }
.wog-layout-minimal .wog-image-link { border-radius: 6px; }
.wog-layout-minimal .wog-title,
.wog-layout-minimal .wog-caption,
.wog-layout-minimal .wog-description { margin-left: 0; margin-right: 0; }
@media (max-width: 900px) {
.wog-layout-tiles .wog-item:nth-child(n) { grid-column: auto; }
.wog-layout-magazine .wog-item:first-child { grid-row: auto; }
.wog-layout-magazine .wog-item:first-child .wog-image { min-height: 0; aspect-ratio: 4 / 3; }
}
@media (max-width: 560px) {
.wog-layout-magazine { grid-template-columns: 1fr; }
.wog-layout-polaroid { padding-left: 8px; padding-right: 8px; }
.wog-layout-polaroid .wog-item {
--wog-card-rotation: -1deg;
--wog-text-rotation: 1deg;
}
.wog-layout-polaroid .wog-item:nth-child(even) {
--wog-card-rotation: 1deg;
--wog-text-rotation: -1deg;
}
.wog-layout-polaroid .wog-item:nth-child(3n) {
--wog-card-rotation: -.6deg;
--wog-text-rotation: .6deg;
}
}