.winkel.terra.tegels-mozaiek .site-categorien.foto .site-categorien-in { grid-template-columns: 1.15fr 1fr 1fr; grid-template-rows: 250px 250px; grid-auto-rows: 250px; gap: 22px; }
.winkel.terra.tegels-mozaiek .site-categorien.foto .site-categorie { border: 0; border-radius: 16px; min-height: 0; height: auto; aspect-ratio: auto; background: var(--donker-vlak, color-mix(in srgb, var(--winkel-accent) 22%, #0a130e)); }
.winkel.terra.tegels-mozaiek .site-categorien.foto .site-categorie:first-child { grid-row: span 2; }
.winkel.terra.tegels-mozaiek .site-categorien.foto .site-categorie:nth-child(4):last-child { grid-column: span 2; }
.winkel.terra.tegels-mozaiek .site-categorien.foto .site-categoriefoto { position: absolute; inset: 0; height: auto; }
.winkel.terra.tegels-mozaiek .site-categorien.foto .site-categoriefoto::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8, 18, 12, 0) 40%, rgba(8, 18, 12, .78) 100%); }
.winkel.terra.tegels-mozaiek .site-categorien.foto .site-categorienaam { position: absolute; left: 0; right: 0; bottom: 0; transform: none; padding: 22px 76px 22px 24px; background: none; border-radius: 0; justify-content: flex-start; align-items: flex-start; text-align: left; }
.winkel.terra.tegels-mozaiek .site-categorien.foto .site-categorienaam b { font-size: 24px; font-weight: 800; color: #fff; letter-spacing: -.015em; }
.winkel.terra.tegels-mozaiek .site-categorien.foto .site-categorie:first-child .site-categorienaam b { font-size: 32px; }
.winkel.terra.tegels-mozaiek .site-categorien.foto .site-categorieknop,
.winkel.terra.tegels-mozaiek .site-categorien.foto .site-categorienaam .btn-primary { display: none; }
.winkel.terra.tegels-mozaiek .site-categorien.foto .site-categoriepijl { display: flex; position: absolute; right: 22px; bottom: 22px; width: 44px; height: 44px; border-radius: 50%; background: #fff; color: var(--nova-inkt); align-items: center; justify-content: center; font-size: 0; }
.winkel.terra.tegels-mozaiek .site-categorien.foto .site-categoriepijl::before { content: ""; width: 8px; height: 8px; border-right: 2.4px solid currentColor; border-top: 2.4px solid currentColor; transform: rotate(45deg); margin-left: -3px; }
.winkel.terra.tegels-mozaiek .site-categorien.foto .site-categorie:hover .site-categoriefoto img { transform: scale(1.03); transition: transform .4s; }
@media (max-width: 1023px) {
.winkel.terra.tegels-mozaiek .site-categorien.foto .site-categorien-in { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: none; grid-auto-rows: 170px; gap: 12px; }
.winkel.terra.tegels-mozaiek .site-categorien.foto .site-categorie:first-child { grid-row: auto; grid-column: span 2; }
.winkel.terra.tegels-mozaiek .site-categorien.foto .site-categorie:nth-child(4):last-child { grid-column: auto; }
.winkel.terra.tegels-mozaiek .site-categorien.foto .site-categorienaam b,
.winkel.terra.tegels-mozaiek .site-categorien.foto .site-categorie:first-child .site-categorienaam b { font-size: 19px; }
}
@media (max-width: 700px) {
.winkel.terra.tegels-mozaiek .site-categorien.foto .site-categorien-in { grid-template-columns: minmax(0, 1fr); grid-auto-rows: 150px; }
.winkel.terra.tegels-mozaiek .site-categorien.foto .site-categorie:first-child { grid-column: auto; }
}
.winkel.terra.tegels-mozaiek .site-categorien.foto .site-categorien-in:has(> :nth-child(6):last-child) { grid-template-columns: 1.3fr 1fr 1fr 1fr; }
.winkel.terra.tegels-mozaiek .site-categorien.foto .site-categorien-in:has(> :nth-child(6):last-child) > .site-categorie:nth-child(6) { grid-column: span 2; }
.winkel.terra.tegels-mozaiek .site-categorien.foto .site-categorien-in:has(> :nth-child(6):last-child) .site-categorienaam b { font-size: 21px; }
.winkel.terra.tegels-mozaiek .site-categorien.foto .site-categorien-in:has(> :nth-child(6):last-child) .site-categorie:first-child .site-categorienaam b { font-size: 32px; }
@media (max-width: 1023px) {
.winkel.terra.tegels-mozaiek .site-categorien.foto .site-categorien-in:has(> :nth-child(6):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.winkel.terra.tegels-mozaiek .site-categorien.foto .site-categorien-in:has(> :nth-child(6):last-child) > .site-categorie:nth-child(6) { grid-column: span 2; }
.winkel.terra.tegels-mozaiek .site-categorien.foto .site-categorien-in:has(> :nth-child(6):last-child) .site-categorienaam b,
.winkel.terra.tegels-mozaiek .site-categorien.foto .site-categorien-in:has(> :nth-child(6):last-child) .site-categorie:first-child .site-categorienaam b { font-size: 18px; }
}
@media (max-width: 700px) {
.winkel.terra.tegels-mozaiek .site-categorien.foto .site-categorien-in:has(> :nth-child(6):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 140px; }
.winkel.terra.tegels-mozaiek .site-categorien.foto .site-categorien-in:has(> :nth-child(6):last-child) > .site-categorie:first-child { grid-column: span 2; }
.winkel.terra.tegels-mozaiek .site-categorien.foto .site-categorien-in:has(> :nth-child(6):last-child) > .site-categorie:nth-child(6) { grid-column: auto; }
.winkel.terra.tegels-mozaiek .site-categorien.foto .site-categorien-in:has(> :nth-child(6):last-child) .site-categoriepijl { width: 34px; height: 34px; right: 12px; bottom: 12px; }
.winkel.terra.tegels-mozaiek .site-categorien.foto .site-categorien-in:has(> :nth-child(6):last-child) .site-categorienaam { padding: 14px 52px 14px 14px; }
}
@media (max-width: 700px) {
.winkel.terra.tegels-mozaiek .site-categorien.foto .site-categorien-in:has(> :nth-child(6):last-child) > .site-categorie:nth-child(6) { grid-column: span 2; }
.winkel.terra.tegels-mozaiek .site-categorien.foto .site-categorien-in:has(> :nth-child(6):last-child) .site-categoriepijl { display: none; }
.winkel.terra.tegels-mozaiek .site-categorien.foto .site-categorien-in:has(> :nth-child(6):last-child) .site-categorienaam { padding: 14px; }
.winkel.terra.tegels-mozaiek .site-categorien.foto .site-categorien-in:has(> :nth-child(6):last-child) .site-categorienaam b { font-size: 16px; line-height: 1.25; }
}
.winkel.terra.tegels-mozaiek .site-categorien.foto .site-categorienaam b { overflow-wrap: break-word; hyphens: auto; }
@media (min-width: 1024px) {
.winkel.terra.tegels-mozaiek .site-categorien.foto .site-categorien-in:has(> :nth-child(3):last-child) { grid-template-rows: 320px; }
.winkel.terra.tegels-mozaiek .site-categorien.foto .site-categorien-in:has(> :nth-child(3):last-child) > .site-categorie:first-child { grid-row: auto; }
.winkel.terra.tegels-mozaiek .site-categorien.foto .site-categorien-in:has(> :nth-child(7):last-child) > .site-categorie:nth-child(7) { grid-column: span 2; }
.winkel.terra.tegels-mozaiek .site-categorien.foto .site-categorien-in:has(> :nth-child(9):last-child) > .site-categorie:nth-child(9) { grid-column: 1 / -1; }
}
@media (min-width: 1024px) and (max-width: 1180px) {
.winkel.terra.tegels-mozaiek .site-categorien.foto .site-categorien-in:has(> :nth-child(6):last-child) { grid-template-columns: 1.15fr 1fr 1fr; }
.winkel.terra.tegels-mozaiek .site-categorien.foto .site-categorien-in:has(> :nth-child(6):last-child) > .site-categorie:nth-child(6) { grid-column: 1 / -1; }
}
@media (min-width: 701px) and (max-width: 1023px) {
.winkel.terra.tegels-mozaiek .site-categorien.foto .site-categorien-in > .site-categorie:nth-child(2n):last-child { grid-column: span 2; }
}