.media_content_1__container {
display: grid;
gap: 60px;
padding-top: 60px;
padding-bottom: 70px;
}
.media_content_1__section {
display: grid;
grid-template-columns: 1fr 1fr;
align-items: start;
gap: 20px;
position: relative;
scroll-margin-top: 100px;
}
body:has(.header__contact) .media_content_1__section {
scroll-margin-top: 140px;
}
.media_content_1__section::before {
content: '';
display: block;
background-image: linear-gradient(to top, var(--color), transparent);
clip-path: polygon(0% 0%, 100% 0%, 0% 100%);
position: absolute;
width: 50%;
height: 100%;
z-index: 0;
}
.media_content_1__section--alt::before {
clip-path: polygon(100% 0%, 0% 0%, 100% 100%);
}
.media_content_1__section--alt {
justify-items: end; 
}
.media_content_1__img {
display: flex;
justify-content: end;
position: relative;
}
.media_content_1--margin .media_content_1__img {
border-radius: 24px;
overflow: hidden;
}
.media_content_1__img img {
height: auto;
}
.media_content_1__img_caption {
display: block;
position: absolute;
left: 0;
bottom: 0;
width: 100%;
background: rgba(255, 255, 255, 0.85);
color: var(--neutral-700);
padding: 8px;
font-size: calc(14 / 16* 1rem);
line-height: 20px;
font-weight: bold;
}
.media_content_1--margin span.media_content_1__img_caption {
padding: 12px 16px;
border-radius: unset;
}
.media_content_1__img_caption a {
color: currentColor;
text-decoration: underline;
}
.media_content_1__section--alt .media_content_1__img_container {
justify-self: start;
}
.media_content_1__img_container--sticky {
position: sticky;
top: 100px;
}
body:has(.header__contact) .media_content_1__img_container--sticky {
top: 140px;
}
.media_content_1__section__content {
margin-top: 20px;
max-width: 460px;
}
.media_content_1__section__content--sticky {
position: sticky;
top: 100px;
}
body:has(.header__contact) .media_content_1__section__content--sticky {
top: 140px;
}
.media_content_1__section--alt .media_content_1__section__content {
grid-row: 1;
width: 100%;
}
.media_content_1__section__intro {
font-size: calc(14 / 16 * 1rem);
line-height: 20px;
color: var(--main);
text-transform: uppercase;
font-weight: 600;
}
.media_content_1__section__intro + .media_content_1__section__title {
margin-top: 8px;
}
.media_content_1__section__title + .prose {
margin-top: 8px;
}
.media_content_1__list {
margin-top: 12px;
}
.prose + .media_content_1__list {
margin-top: 20px;
}
.media_content_1__list li {
display: flex;
gap: 8px;
padding: 12px;
padding-bottom: 14px;
background-color: var(--neutral-100);
border-radius: 6px;
color: var(--neutral-600);
}
.media_content_1__list li+li {
margin-top: 8px;
}
.media_content_1__list svg {
flex-shrink: 0;
}
.media_content_1__btns {
margin-top: 16px;
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.media_content_1__video {
position: relative;
aspect-ratio: 16/9;
max-width: unset;
width: 100%;
}
.media_content_1__video--sticky {
position: sticky;
top: 100px;
}
.media_content_1__video iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.media_content_1__img_wrapper {
display: grid;
}
.media_content_1__img_wrapper > * {
grid-area: 1/1;
position: relative;
}
.media_content_1__img_loading {
background-color: var(--neutral-200);
overflow: hidden;
}
.media_content_1__img_loading::after {
content: "";
background-image: linear-gradient(90deg, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, .2) 20%, rgba(255, 255, 255, .5) 60%, rgba(255, 255, 255, 0));
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
transform: translate(-100%);
animation: shimmer 1.2s infinite;
}
@media(min-width: 1000px) {
.media_content_1--margin .media_content_1__img_container,
.media_content_1--margin .media_content_1__video {
margin-left: 40px;
overflow: hidden;
}
.media_content_1__section--alt .media_content_1__img_container,
.media_content_1__section--alt .media_content_1__video {
margin-left: unset;
}
.media_content_1--margin .media_content_1__img > * {
border-radius: 24px;
overflow: hidden;
}
.media_content_1--margin .media_content_1__section--alt .media_content_1__img_container {
margin-right: 40px;
}
.media_content_1--margin .media_content_1__video:first-child {
width: calc(100% - 40px);
}
.media_content_1--margin .media_content_1__section--alt .media_content_1__video {
width: calc(100% - 40px);
margin-right: 40px;
}
} [data-type='dark'] .media_content_1__section__title,
[data-type='dark'] .media_content_1__section__content .prose {
color: #fff;
}
@media(max-width: 1000px) {
.media_content_1__container {
max-width: 960px;
padding-left: 10px;
padding-right: 10px;
margin: 0 auto;
}
.media_content_1__section {
grid-template-columns: 1fr;
justify-items: start;
}
.media_content_1__img img {
border-radius: unset;
}
.media_content_1__section__content {
margin-top: unset;
max-width: unset;
}
.media_content_1__section--alt .media_content_1__section__content {
grid-row: unset;
}
.media_content_1__section::before {
content: unset;
}
.media_content_1__section--alt .media_content_1__img_container {
justify-self: unset;
}
.media_content_1__img_container--sticky,
.media_content_1__section__content--sticky,
.media_content_1__video--sticky {
position: unset;
}
}
@media(max-width: 480px) {
.media_content_1__img img {
max-width: 100% !important;
}
}