.dp400-logo-tile{
  --dp400-logo-size:70%;
  position:relative;
  display:grid;
  place-items:center;
  overflow:hidden;
  flex:0 0 auto;
  border:1px solid #cbd5e1;
  border-radius:14px;
  background:#fff;
  box-sizing:border-box;
}
.dp400-logo-tile.is-square{aspect-ratio:1/1}
.dp400-logo-tile.is-rectangle{aspect-ratio:16/7}
.dp400-logo-fit{
  position:relative;
  display:block;
  width:var(--dp400-logo-size);
  height:var(--dp400-logo-size);
  max-width:100%;
  max-height:100%;
  min-width:0;
  min-height:0;
  overflow:hidden;
}
.dp400-logo-fit img{
  position:absolute;
  inset:0;
  display:block;
  width:100%;
  height:100%;
  max-width:100%;
  max-height:100%;
  object-fit:contain;
  object-position:center;
  transform:none;
}
.dp400-logo-tile-preview.is-square{width:min(100%,240px)}
.dp400-logo-tile-preview.is-rectangle{width:min(100%,340px)}
.dp400-logo-tile-compact.is-square{width:68px}
.dp400-logo-tile-compact.is-rectangle{width:146px}
.dp400-logo-tile.is-loading::after{
  content:"";
  width:24px;
  height:24px;
  border:3px solid rgba(100,116,139,.25);
  border-top-color:#2563eb;
  border-radius:50%;
  animation:dp400-logo-spin .7s linear infinite;
}
.dp400-logo-tile.is-loading img{opacity:.2}
@keyframes dp400-logo-spin{to{transform:rotate(360deg)}}
@media(max-width:520px){
  .dp400-logo-tile-compact.is-square{width:62px}
  .dp400-logo-tile-compact.is-rectangle{width:134px}
}