.e2d-letters{
  --letters-paper:#FFFFFF;
  --letters-gap:18px;

  --letters-inset:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 210' preserveAspectRatio='none'%3E%3Cpath fill='%23fff' d='M2 10C46 3 88 1 122 1C158 1 198 3 238 9C240 28 241 58 241 104C241 148 240 180 238 200C198 207 158 209 122 209C88 209 46 207 2 199C0 180 -1 148 -1 104C-1 58 0 28 2 10Z'/%3E%3C/svg%3E");

  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:var(--letters-gap);
  width:100%;
  max-width:var(--e2d-shell-w, 1400px);
  margin-left:auto; margin-right:auto;

  padding:14px 6px 20px;
}

.e2d-letters__letter{
  position:relative;
  display:flex; flex-direction:column;
  gap:9px;
  padding:20px 20px 18px;
  background:var(--letters-paper);

  filter:drop-shadow(2px 4px 8px rgba(61,86,27,.24));
  -webkit-mask-image:var(--letters-inset); mask-image:var(--letters-inset);
  -webkit-mask-size:100% 100%;      mask-size:100% 100%;
  -webkit-mask-repeat:no-repeat;    mask-repeat:no-repeat;
  transition:transform .18s ease-out;
}

.e2d-letters__letter:hover{
  transform:rotate(0deg) translateY(-4px);
  filter:drop-shadow(4px 8px 16px rgba(61,86,27,.30));
}

.e2d-letters__img{
  flex:0 0 40px; width:40px; height:40px;
  background-repeat:no-repeat; background-position:left center; background-size:40px 40px;
}

.e2d-letters__base{
  margin:0; padding:0;
  color:#3D561B; font-size:18px; font-weight:700; line-height:1.28;
}

.e2d-letters__body{
  margin:0; padding:0;
  color:#242424; opacity:.86;
  font-size:14.5px; line-height:1.55;
  flex:1 1 auto;
}

.e2d-letters__tip{
  align-self:flex-start;
  position:relative;
  margin-top:2px; padding-bottom:9px;
  color:#FF6A00; font-size:13.5px; font-weight:700; line-height:1.3;
}
.e2d-letters__tip::after{
  content:""; position:absolute; left:0; right:-4px; bottom:0; height:7px;
  background:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 9' preserveAspectRatio='none'%3E%3Cg fill='none' stroke='%23FF6A00' stroke-linecap='round'%3E%3Cpath d='M2 5.6C28 3.2 62 3.8 117 4.6' stroke-width='2' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M8 7.4C40 6 78 6.4 112 7' stroke-width='1.1' stroke-opacity='.5' vector-effect='non-scaling-stroke'/%3E%3C/g%3E%3C/svg%3E") left bottom/100% 7px no-repeat;
}

@media(max-width:1100px){
  .e2d-letters{ grid-template-columns:repeat(2, 1fr) }
}

@media(max-width:767px){
  .e2d-letters{
    grid-template-columns:1fr;
    gap:14px;
    padding:10px 0 16px;
  }
  .e2d-letters__letter{ padding:16px 16px 15px; gap:8px }
  .e2d-letters__img{ flex-basis:34px; width:34px; height:34px; background-size:34px 34px }
  .e2d-letters__base{ font-size:16.5px }
  .e2d-letters__body{ font-size:14px; line-height:1.5 }
  .e2d-letters__tip{ font-size:13px }

  .e2d-letters__letter:hover{ transform:none; filter:drop-shadow(2px 4px 8px rgba(61,86,27,.24)) }
}

@media(prefers-reduced-motion:reduce){
  .e2d-letters__letter{ transition:none }
}