.yono-info-grid{
  --yono-info-gap:clamp(12px,1.5vw,18px);
  --yono-info-pad:clamp(18px,1.6vw,24px);
  --yono-info-radius:18px;
  --yono-info-media:78px;
  --yono-info-bg-start:#f8fbff;
  --yono-info-bg-end:#eef9f7;
  --yono-info-border:#d7e7ef;
  --yono-info-accent:#2f91e8;
  --yono-info-title:#13253f;
  --yono-info-text:#475569;
  --yono-info-link:#1677c8;
  display:grid;
  grid-template-columns:repeat(var(--yono-info-cols,1),minmax(0,1fr));
  gap:var(--yono-info-gap);
  width:100%;
  margin:20px 0;
}

.yono-info-grid--cols-1{--yono-info-cols:1}
.yono-info-grid--cols-2{--yono-info-cols:2}
.yono-info-grid--cols-3{--yono-info-cols:3}
.yono-info-grid--cols-4{--yono-info-cols:4}
.yono-info-grid--media-small{--yono-info-media:58px}
.yono-info-grid--media-medium{--yono-info-media:78px}
.yono-info-grid--media-large{--yono-info-media:98px}

.yono-info-box{
  position:relative;
  min-width:0;
  overflow:hidden;
  padding:var(--yono-info-pad);
  border:1px solid var(--yono-info-border);
  border-radius:var(--yono-info-radius);
  background:linear-gradient(145deg,var(--yono-info-bg-start) 0%,var(--yono-info-bg-end) 100%);
  box-shadow:0 10px 28px rgba(19,55,82,.055);
}

.yono-info-box::before{
  content:"";
  position:absolute;
  top:0;
  left:24px;
  right:24px;
  height:3px;
  border-radius:0 0 999px 999px;
  background:linear-gradient(90deg,transparent 0%,var(--yono-info-accent) 50%,transparent 100%);
  opacity:.74;
  pointer-events:none;
}

.yono-info-grid--align-center .yono-info-box{text-align:center}
.yono-info-grid--align-left .yono-info-box{text-align:left}

.yono-info-box__media{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:var(--yono-info-media);
  margin:0 0 14px;
}

.yono-info-grid--align-left .yono-info-box__media{justify-content:flex-start}

.yono-info-box__media-link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  max-width:100%;
  border-radius:16px;
  color:inherit;
  text-decoration:none;
  transition:transform .18s ease,filter .18s ease;
}

.yono-info-box__media-link:hover{
  transform:translateY(-2px);
  filter:saturate(1.04);
}

.yono-info-box__media-link:focus-visible,
.yono-info-box__title-link:focus-visible,
.yono-info-box__text-link:focus-visible,
.yono-info-box__text a:focus-visible{
  outline:3px solid color-mix(in srgb,var(--yono-info-accent) 42%,transparent);
  outline-offset:3px;
}

.yono-info-box__image{
  display:block;
  width:var(--yono-info-media);
  height:var(--yono-info-media);
  max-width:100%;
  object-fit:contain;
  border-radius:14%;
}

.yono-info-box__image--svg{object-fit:contain}
.yono-info-box__content{min-width:0}

.yono-info-box__title,
.entry-content .yono-info-box__title,
.home-editor-content__body .yono-info-box__title{
  margin:0 0 8px;
  color:var(--yono-info-title);
  font-size:clamp(15px,.45vw + 13px,19px);
  line-height:1.28;
  font-weight:800;
  letter-spacing:0;
}

.yono-info-box__title-link{
  color:inherit;
  text-decoration:none;
  transition:color .18s ease;
}
.yono-info-box__title-link:hover{color:var(--yono-info-link)}

.yono-info-box__text,
.entry-content .yono-info-box__text,
.home-editor-content__body .yono-info-box__text{
  margin:0;
  color:var(--yono-info-text);
  font-size:var(--fs-body,13px);
  line-height:1.72;
}

.yono-info-box__text > *:first-child{margin-top:0}
.yono-info-box__text > *:last-child{margin-bottom:0}
.yono-info-box__text p{margin:0 0 10px}
.yono-info-box__text p:last-child{margin-bottom:0}
.yono-info-box__text a,
.yono-info-box__text-link{
  color:var(--yono-info-link);
  text-decoration:underline;
  text-underline-offset:.16em;
  text-decoration-thickness:1px;
}
.yono-info-box__text-link{display:block}

@supports not (color:color-mix(in srgb,#000 50%,#fff)){
  .yono-info-box__media-link:focus-visible,
  .yono-info-box__title-link:focus-visible,
  .yono-info-box__text-link:focus-visible,
  .yono-info-box__text a:focus-visible{
    outline-color:var(--yono-info-accent);
  }
}

@media (max-width:767px){
  .yono-info-grid{
    --yono-info-cols:1;
    --yono-info-gap:10px;
    --yono-info-pad:16px;
    margin:16px 0;
  }
  .yono-info-box{
    --yono-info-radius:16px;
    box-shadow:0 7px 20px rgba(19,55,82,.045);
  }
  .yono-info-box::before{left:20px;right:20px}
  .yono-info-box__title,
  .entry-content .yono-info-box__title,
  .home-editor-content__body .yono-info-box__title{
    font-size:15px;
  }
}

@media (prefers-reduced-motion:reduce){
  .yono-info-box__media-link,
  .yono-info-box__title-link{transition:none}
  .yono-info-box__media-link:hover{transform:none}
}

 
.yono-info-box__library-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:var(--yono-info-icon-size,var(--yono-info-media));
  height:var(--yono-info-icon-size,var(--yono-info-media));
  max-width:100%;
  color:var(--yono-info-accent);
  line-height:0;
}
.yono-info-box__library-icon-svg{
  display:block;
  width:100%;
  height:100%;
  overflow:visible;
}