.yd_image_row {
--ydir-block-bg: transparent;
--ydir-gap: 40px;
--ydir-content-gap: 40px;
--ydir-radius: 12px;
--ydir-pad-t: 24px;
--ydir-pad-b: 36px;
--ydir-img-w: 100%;
--ydir-img-h: auto;
width: 100%;
max-width: 100%;
min-width: 0;
box-sizing: border-box;
padding-top: var(--ydir-pad-t);
padding-bottom: var(--ydir-pad-b);
margin-bottom: 40px;
}
.yd_image_row.has-block-bg {
background-color: var(--ydir-block-bg);
}
.yd_image_row.is-full-bleed {
width: 100vw;
max-width: 100vw;
margin-left: calc(50% - 50vw);
margin-right: calc(50% - 50vw);
box-sizing: border-box;
}
.yd_image_row__inner {
max-width: 1120px;
margin: 0 auto;
width: 100%;
padding-left: 20px;
padding-right: 20px;
box-sizing: border-box;
min-width: 0;
}
.yd_image_row.is-full-bleed .yd_image_row__inner {
max-width: none;
}
.yd_image_row__list {
display: flex;
flex-direction: column;
gap: var(--ydir-gap);
min-width: 0;
}
.yd_image_row__item {
display: flex;
flex-direction: column;
align-items: stretch;
gap: 20px;
min-width: 0;
}
.yd_image_row__media {
width: 100%;
min-width: 0;
}
.yd_image_row__img {
display: block;
width: 100%;
max-width: 100%;
height: auto;
object-fit: cover;
border-radius: var(--ydir-radius);
background: #f3f4f6;
}
.yd_image_row.has-shadow .yd_image_row__img {
box-shadow: 0 14px 34px rgba(0, 0, 0, 0.1);
}
.yd_image_row__img.is-svg {
object-fit: contain;
background: transparent;
}
.yd_image_row__content {
width: 100%;
min-width: 0;
}
.yd_image_row__title {
margin: 0 0 12px;
font-weight: 700;
color: #111;
font-size: clamp(22px, 4.2vw, 32px);
line-height: 1.2;
letter-spacing: -0.01em;
}
.yd_image_row__text {
margin: 0;
color: #444;
font-size: clamp(15px, 2.4vw, 18px);
line-height: 1.55;
}
.yd_image_row__text p {
margin: 0 0 0.55em;
}
.yd_image_row__text p:last-child {
margin-bottom: 0;
}
.yd_image_row__text ol,
.yd_image_row__text ul {
margin: 0;
padding-left: 1.25em;
}
.yd_image_row__text li {
margin: 0 0 0.35em;
}
.yd_image_row__text li:last-child {
margin-bottom: 0;
}
@media (min-width: 768px) {
.yd_image_row {
--ydir-pad-t: 28px;
--ydir-pad-b: 44px;
}
.yd_image_row__inner {
padding-left: 24px;
padding-right: 24px;
}
.yd_image_row__item {
flex-direction: row;
align-items: center;
gap: var(--ydir-content-gap);
}
.yd_image_row__item.is-image-right {
flex-direction: row-reverse;
}
.yd_image_row__media,
.yd_image_row__content {
flex: 1 1 0;
width: 50%;
}
.yd_image_row__img {
width: var(--ydir-img-w);
height: var(--ydir-img-h);
max-width: 100%;
}
}