::view-transition-old(*),
::view-transition-new(*) {mix-blend-mode: normal;}

::view-transition-old(root),
::view-transition-new(root) {animation: none;}

@property --view-transition-duration {
	syntax:"<time>";
	inherits:true;
	initial-value:0.75s;
}
::view-transition-group(*) {animation-duration:var(--view-transition-duration);}

@view-transition {
  navigation: auto;
}

.items {display:flex; gap:10px; flex-wrap:wrap;}

section h3 {position:relative;}
section h3 a::before {content: "\25C2 "; font-size:40px; padding:0; margin:0; position:relative; top:6px;}

.item {--size:100px; display:block; height:var(--size); width:var(--size); text-decoration:none;}
.item-large img {width:100%;}
.item-0 {view-transition-name:item-0;}
.item-1 {view-transition-name:item-1;}
.item-2 {view-transition-name:item-2;}
.item-3 {view-transition-name:item-3;}

.item-large {--size:50%;}

.item-card {display:flex; gap:10px; margin-top:0;}

.card-contents {flex:1;}

@keyframes trans {
  from {transform:translateX(100vw);}
  to {transform:translateX(0);}
}
::view-transition-new(all-items-link) {animation:trans 1s;}

@media only screen and (max-width:730px) {
	.item-large {--size:100%;}
	.item-card {flex-wrap:wrap;}
}