.storytelling {
width: 100%;
background: var(--white);
.storytelling_inner {
display: flex;
align-items: center;
gap: clamp(32px, 5vw, 64px);
}
.storytelling_left {
flex: 1 1 45%;
min-width: 280px;
.eyebrow {
color: var(--rose-deep);
font-size: 14px;
letter-spacing: .26em;
margin: 0 0 14px;
}
}
.storytelling_title {
font-family: "Mulish", sans-serif;
font-weight: 800;
font-size: clamp(30px, 3.6vw, 44px);
line-height: 1.05;
letter-spacing: -1px;
color: var(--ink);
margin: 0 0 18px;
}
.storytelling_content {
font-size: 16px;
line-height: 1.7;
color: var(--ink);
opacity: .85;
p {
margin: 0 0 16px;
}
p:last-child {
margin-bottom: 0;
}
}
.storytelling_right {
flex: 1 1 55%;
max-width: 640px;
min-width: 280px;
display: flex;
flex-direction: column;
gap: 20px;
}
.storytelling_image {
aspect-ratio: 4 / 3;
overflow: hidden;
border: 1px solid var(--rose);
border-radius: var(--radius);
box-shadow: 0 8px 24px rgba(26, 26, 26, .1);
.storytelling_image_img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform .8s var(--ease);
}
&:hover .storytelling_image_img {
transform: scale(1.07);
}
}
.storytelling_logos {
list-style: none !important;
margin: 0;
padding-left: 0 !important;
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 12px;
}
.storytelling_logo_item {
margin: 0 !important;
}
.storytelling_logo_box {
display: flex;
align-items: center;
justify-content: center;
aspect-ratio: 1 / 1;
border: 1px solid var(--rose);
border-radius: var(--radius);
padding: 16px;
box-shadow: 0 1px 3px rgba(26, 26, 26, .05);
text-decoration: none;
transition: border-color .3s var(--ease), transform .3s var(--ease);
}
a.storytelling_logo_box:hover {
border-color: var(--rose-deep);
transform: translateY(-2px);
}
.storytelling_logo_img {
max-width: 100%;
max-height: 100%;
object-fit: contain;
} .storytelling_logos--single {
grid-template-columns: 1fr;
}
.storytelling_logos--single .storytelling_logo_box {
aspect-ratio: 4 / 3;
border: none;
padding: 0;
}
.storytelling_logos--single .storytelling_logo_img {
width: 100%;
height: 100%;
max-width: none;
max-height: none;
object-fit: cover;
}
@media (max-width: 991px) {
.storytelling_inner {
flex-direction: column;
align-items: flex-start;
}
.storytelling_left,
.storytelling_right {
flex: 1 1 100%;
width: 100%;
}
}
}