﻿.content-media-grid-section{padding:4.4rem 0}
.content-media-grid{display: flex;gap: 2.4rem;flex-direction:column}
.content-media-grid__column {display:flex;place-content:start;gap:0;flex: 1;flex-shrink: 0;display: flex;width:100%}
.content-media-grid__column-img{position:relative}
.content-media-grid__column-img picture{display:block;width:100%;}
.content-media-grid__column-img img,.content-media-grid__column-slider img{ width: 100%;display: block;height: auto;border-radius: 1.6rem;aspect-ratio:3/2.5;object-fit:cover}
.content-media-grid__column-slider{display:block;}
.content-media-grid__column-slider img{border-radius:0}

.content-media-grid__column-img-overlapping{margin-bottom:6.4rem}
.content-media-grid__column-img-overlapping picture:first-of-type{width:calc((100% - 5 * 2.4rem) / 6 * 5 + 4 * 2.4rem);}
.content-media-grid__column-img-overlapping picture:first-of-type img{aspect-ratio:1}
.content-media-grid__column-img-overlapping picture:last-of-type{position: absolute;width: calc((100% - 5 * 2.4rem) / 6 * 3 + 2 * 2.4rem);left: 0;bottom: -4.8rem;border-radius: 1.6rem;}
.content-media-grid__column-img-overlapping picture:last-of-type img{aspect-ratio: 2 / 2.5;object-fit: cover;}

.content-media-grid__body{width:100%;}
.content-media-grid__body p a{color:var(--primary-color);font-weight:900;font-family:var(--ff-default)}
.content-media-grid__body p a:hover{color:#004b84}
.content-media-grid__reverse .content-media-grid__column{place-content:end}

.content-media-grid__buttons{margin-top:2.4rem;display:flex;flex-wrap:wrap;place-content:space-between;gap:2.4rem}
.content-media-grid__buttons > button{width:100%;margin:0}

.content-media-grid .swiper-slide span:not(.image-label){pointer-events: none;border: 2px solid #fff;bottom: 1.6rem;right: 1.6rem;width: 4rem;height: 4rem;position: absolute;display: flex;place-content: center;align-items: center;border-radius: 50%;background: #fff;color: var(--primary-color);}



.content-media-grid__body h2{margin-bottom:2.4rem}
.content-media-grid__body > p:first-of-type{margin-top:0;}
.content-media-grid__body > p:last-of-type{margin-bottom:0}
.content-media-grid__body > .button{margin-top:3.2rem;margin-bottom:3.2rem}


@media(min-width:500px){
    .content-media-grid__column-img-overlapping picture:first-of-type img{aspect-ratio:3/2}
    .content-media-grid__column-img-overlapping picture:last-of-type{width: calc((100% - 5 * 2.4rem) / 6 * 2 + 1 * 2.4rem);}
}


@media(min-width:1280px){
    .content-media-grid-section{padding:8.8rem 0}
    .content-media-grid{align-items:center;flex-direction:row}
    .content-media-grid__reverse{flex-direction: row-reverse;}
    .content-media-grid__column{width:calc(50% - 1.2rem)}
    .content-media-grid__body{width: calc((100% - 5 * 2.4rem) / 6 * 5 + 4 * 2.4rem);}
    .content-media-grid__slider .content-media-grid__column-body{margin-top:-10.6rem}
    .content-media-grid__column-img-overlapping{margin-bottom:0}
    .content-media-grid__column-img-overlapping picture:last-of-type{bottom:-3.2rem}
    .content-media-grid__column-img-overlapping picture:first-of-type{transform: translateY(-3.2rem);}
}



@media(min-width:1366px){
    .content-media-grid__narrower{width: calc((100% - 11 * 2.4rem) / 12 * 10 + (10 - 1) * 2.4rem);margin:auto}
}


@media(min-width:1440px){
    /*.content-media-grid-section{padding:8.8rem 0}*/
    /*.content-media-grid__reverse .content-media-grid__column,.content-media-grid .content-media-grid__column{place-content:center}*/
}

@media(min-width:1920px){
/*    .content-media-grid__column,
    .content-media-grid__reverse .content-media-grid__column{place-content:center}
    .content-media-grid__body{width: calc((100% - 5 * 2.4rem) / 6 * 4 + 3 * 2.4rem);}*/
    .content-media-grid__column-img img,.content-media-grid__column-slider img{aspect-ratio:3/2}
}



