.base-image{position:relative;overflow:hidden}.base-image.--ratio-4-3{aspect-ratio:4/3}.base-image.--ratio-16-9{aspect-ratio:16/9}.base-image.--ratio-3-2{aspect-ratio:3/2}.base-image.--ratio-1-1{aspect-ratio:1}.base-image.--ratio-3-4{aspect-ratio:3/4}.base-image.--ratio-4-5{aspect-ratio:4/5}.base-image.--ratio-5-4{aspect-ratio:5/4}.base-image.--contain,.base-image.--contain picture{width:100%;height:100%}.base-image.--contain img{object-fit:contain;width:100%;height:100%}.base-image.--cover,.base-image.--cover picture{width:100%;height:100%}.base-image.--cover img{object-fit:cover;width:100%;height:100%}.base-image.--placeholder{--placeholder-opacity:.7}.base-image.--placeholder:before{content:"";background-color:var(--color-primary-100);z-index:-1;width:100%;height:100%;opacity:var(--placeholder-opacity);transition:opacity .3s;display:block;position:absolute;top:50%;left:50%;transform:translate(-50%)translateY(-50%)}.base-image.--placeholder:has(img[src]:not([src=""])){--placeholder-opacity:0}