.brand-mark{
  position:relative;
  width:54px;
  height:58px;
  padding:6px;
  display:grid;
  place-items:center;
  flex:0 0 auto;
  overflow:hidden;
  border-radius:14px;
  background:
    radial-gradient(circle at 23% 18%,rgba(255,255,255,.98) 0%,rgba(255,255,255,.72) 18%,rgba(255,255,255,0) 42%),
    linear-gradient(145deg,#f8f4ea 0%,#eedfb8 50%,#e9f0ea 100%);
  border:1px solid rgba(184,137,45,.34);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.92),
    inset 0 -10px 22px rgba(18,62,49,.045),
    0 8px 20px rgba(16,35,28,.12),
    0 2px 5px rgba(184,137,45,.10);
}
.brand-mark::after{
  content:"";
  position:absolute;
  inset:1px;
  border-radius:12px;
  pointer-events:none;
  border:1px solid rgba(255,255,255,.48);
}
.brand-mark img{
  position:relative;
  z-index:1;
  width:40px;
  height:46px;
  object-fit:contain;
  filter:drop-shadow(0 4px 7px rgba(16,35,28,.20)) saturate(1.08) contrast(1.06);
}
.brand{gap:13px}
@media(max-width:560px){
  .brand-mark{width:48px;height:52px;padding:5px;border-radius:12px}
  .brand-mark::after{border-radius:10px}
  .brand-mark img{width:36px;height:42px}
}