.yd_icon_grid {
--ydig-gap: 24px;
--ydig-grid-gap: 16px;
--ydig-text-align: left;
--ydig-icon-bw: 1px;
--ydig-icon-bc: #e5e7eb;
--ydig-item-bw: 1px;
--ydig-item-bc: #e5e7eb;
--ydig-big-w: auto;
--ydig-big-h: auto;
padding: 20px 0;
margin-bottom: 50px;
}
.yd_icon_grid__layout {
display: grid;
grid-template-columns: 1fr;
gap: var(--ydig-gap);
align-items: stretch;
}
.yd_icon_grid.has-image .yd_icon_grid__layout {
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
.yd_icon_grid__items {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--ydig-grid-gap);
height: 100%;
}
.yd_icon_grid__item {
display: flex;
flex-direction: column;
background: #fff;
padding: 18px 18px 16px 18px;
border-radius: 12px;
min-height: 0;
}
.yd_icon_grid.has-item-border .yd_icon_grid__item {
border: var(--ydig-item-bw) solid var(--ydig-item-bc);
}
.yd_icon_grid__icon {
width: 68px;
height: 68px;
border-radius: 68px;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.yd_icon_grid.has-icon-border .yd_icon_grid__icon {
border: var(--ydig-icon-bw) solid var(--ydig-icon-bc);
}
.yd_icon_grid__iconImg {
display: block;
max-width: 70%;
max-height: 70%;
width: auto;
height: auto;
}
.yd_icon_grid__title {
margin-top: 12px;
font-weight: 600;
color: #222;
font-size: 18px;
text-align: var(--ydig-text-align);
}
.yd_icon_grid__text {
margin-top: 8px;
color: #666;
line-height: 1.6;
font-size: 16px;
text-align: var(--ydig-text-align);
}
.yd_icon_grid__right,
.yd_icon_grid__bigMedia {
height: 100%;
}
.yd_icon_grid__bigMedia {
border-radius: 16px;
overflow: hidden;
width: 100%;
min-height: 100%;
}
.yd_icon_grid__bigImg {
display: block;
width: 100%;
height: 100%;
max-width: 100%;
object-fit: cover;
} @media (max-width: 768px) {
.yd_icon_grid.has-image .yd_icon_grid__layout {
grid-template-columns: 1fr;
} .yd_icon_grid__right {
display: none;
} .yd_icon_grid__items {
grid-template-columns: 1fr;
} .yd_icon_grid.is-mobile-scroll .yd_icon_grid__items {
grid-template-columns: repeat(4, minmax(240px, 1fr));
grid-auto-flow: column;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scroll-snap-type: x mandatory;
padding-bottom: 20px;
}
.yd_icon_grid.is-mobile-scroll .yd_icon_grid__item {
scroll-snap-align: start;
}
}