.yd_image_column {
--ydic-gap: 40px;
--ydic-radius: 10px;
--ydic-item-radius: 12px;
--ydic-item-width: auto;
--ydic-bg: transparent;
--ydic-text-align: center;
padding: 20px 0;
margin-bottom: 50px;
}
@media (max-width: 782px) {
.yd_image_column {
padding: 20px 0;
}
}
.yd_image_column-wrap {
display: block;
}
.yd_image_column__grid {
display: flex;
flex-wrap: wrap;
gap: var(--ydic-gap);
align-items: stretch;
justify-content: center;
}
.yd_image_column__item {
display: flex;
flex-direction: column;
text-decoration: none;
color: inherit;
background: var(--ydic-bg);
border-radius: var(--ydic-item-radius);
padding: 0;
flex: 0 1 var(--ydic-item-width);
width: var(--ydic-item-width);
max-width: 100%;
}
.yd_image_column__content {
display: flex;
flex-direction: column;
flex: 1 1 auto;
min-width: 0;
} .yd_image_column.is-image-left .yd_image_column__item {
flex-direction: row;
align-items: stretch;
gap: 16px;
}
.yd_image_column.is-image-left .yd_image_column__media {
flex: 0 0 auto;
align-self: flex-start;
}
.yd_image_column.is-image-left .yd_image_column__title {
margin-top: 0;
}
.yd_image_column.is-image-left .yd_image_column__text {
margin-top: 8px;
}
.yd_image_column__media {
display: flex;
justify-content: center;
overflow: hidden;
border-radius: var(--ydic-radius);
}
.yd_image_column__img {
display: block;
max-width: 100%;
width: var(--ydic-img-w, auto);
height: var(--ydic-img-h, auto);
border-radius: 0;
box-shadow: none;
object-fit: cover;
}
.yd_image_column__img.is-svg {
object-fit: contain;
}
.yd_image_column.has-shadow .yd_image_column__item {
box-shadow: 0 14px 34px rgba(0, 0, 0, 0.08);
padding: 20px 20px 30px 20px;
}
.yd_image_column.has-shadow a.yd_image_column__item:hover {
box-shadow: 0 16px 38px rgba(0, 0, 0, 0.12);
}
.yd_image_column__title {
margin-top: 20px;
font-weight: 600;
color: #333;
font-size: 22px;
text-align: var(--ydic-text-align);
line-height: 1.25;
margin-bottom: 10px;
}
.yd_image_column__text {
margin-top: 8px;
color: #666;
line-height: 1.6;
font-size: 16px;
text-align: var(--ydic-text-align);
display: flex;
flex-direction: column;
flex: 1 1 auto;
}
.yd_image_column__textInner {
display: flex;
flex-direction: column;
justify-content: space-between;
flex: 1 1 auto;
min-height: 100%;
}
@media (max-width: 768px) {
.yd_image_column__grid {
justify-content: flex-start;
}
.yd_image_column.is-mobile-scroll .yd_image_column__grid {
flex-wrap: nowrap;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scroll-snap-type: x mandatory;
padding-bottom: 50px;
}
.yd_image_column.is-mobile-scroll .yd_image_column__item {
flex: 0 0 auto;
scroll-snap-align: start;
width: var(--ydic-item-width);
padding-bottom: 20px;
}
.yd_image_column:not(.is-mobile-scroll) .yd_image_column__grid {
flex-direction: column;
}
.yd_image_column:not(.is-mobile-scroll) .yd_image_column__item {
width: 100%; flex: 0 0 auto;
} .yd_image_column__img {
width: auto;
height: auto;
}
}