.wp-block-media-text {
display: grid;
grid-template-columns: 50% 1fr;
gap: 2rem;
align-items: center;
margin: 1.5rem 0;
width: 100%;
} .wp-block-media-text__media {
width: 100%;
max-width: 100%;
}
.wp-block-media-text__media img,
.wp-block-media-text__media video {
max-width: 100%;
height: auto;
display: block;
border-radius: 4px;
} .wp-block-media-text__content {
word-wrap: break-word;
overflow-wrap: break-word;
padding: 0.5rem 0;
} .wp-block-media-text.has-media-on-the-right {
grid-template-columns: 1fr 50%;
} @media (max-width: 768px) {
.wp-block-media-text.is-stacked-on-mobile {
grid-template-columns: 1fr !important;
gap: 1rem;
}
.wp-block-media-text.is-stacked-on-mobile .wp-block-media-text__media,
.wp-block-media-text.is-stacked-on-mobile .wp-block-media-text__content {
width: 100%;
max-width: 100%;
}
} @media (max-width: 480px) {
.wp-block-media-text {
grid-template-columns: 1fr !important;
gap: 1rem;
}
.wp-block-media-text .wp-block-media-text__media,
.wp-block-media-text .wp-block-media-text__content {
width: 100%;
max-width: 100%;
grid-column: 1 / -1;
} .wp-block-media-text .wp-block-media-text__media {
order: -1;
}
.wp-block-media-text.has-media-on-the-right .wp-block-media-text__media {
order: -1;
}
} @media (max-width: 360px) {
.wp-block-media-text {
gap: 0.75rem;
margin: 1rem 0;
}
.wp-block-media-text__media img {
border-radius: 2px;
}
.wp-block-media-text__content {
font-size: 0.875rem;
line-height: 1.5;
}
.wp-block-media-text__content h2 {
font-size: 1.1rem !important;
}
.wp-block-media-text__content h3 {
font-size: 1rem !important;
}
.wp-block-media-text__content p {
font-size: 0.875rem !important;
}
} .wp-block-media-text.has-background {
padding: 1.5rem;
border-radius: 4px;
} .wp-block-media-text.is-image-fill .wp-block-media-text__media {
background-size: cover;
background-position: center;
min-height: 300px;
} .wp-block-media-text__media a {
display: block;
line-height: 0;
}
.wp-block-media-text__media a img {
transition: opacity 0.2s ease;
}
.wp-block-media-text__media a:hover img {
opacity: 0.9;
} @media (max-width: 768px) {
.wp-block-media-text.is-stacked-on-mobile {
grid-template-columns: 100% !important;
gap: 1rem;
}
.wp-block-media-text.is-stacked-on-mobile > .wp-block-media-text__media,
.wp-block-media-text.is-stacked-on-mobile > .wp-block-media-text__content {
width: 100%;
}
}