.template-carbone .watch-animation-mobile {
    display: flex
}

.debug .section-grid {
    height: 140vh
}

.debug .section-grid .grid {
    width: 100%;
    transform: translate(-50%)
}

.debug .section-grid .grid__column {
    width: 15%;
    transform: none !important
}

.debug .section-grid .section-grid-gradient-top,
.debug .section-grid .section-grid-gradient-bot {
    display: none
}

.section-grid-gradient-top {
    position: absolute;
    height: 200px;
    width: 100%;
    background: #111111;
    
	background: linear-gradient(180deg,rgba(11, 11, 11, 1) 20%, rgba(0, 0, 0, 0) 100%);
    top: 0;
    left: 0;
    z-index: 1
}

.section-grid-gradient-bot {
    position: absolute;
    height: 200px;
    width: 100%;
    background: #000;
    background: linear-gradient(0deg,rgba(0, 0, 0, 1) 20%, rgba(0, 0, 0, 0) 100%);
    bottom: 0;
    left: 0;
    z-index: 1
}

.section-grid-mask {
    overflow: hidden;
    display: block
}

.section-grid {
    position: relative;
    background-color: #0B0B0B;
    top: 0;
    left: 0;
    width: 100%;
    height: 150vh
}

@media (max-width: 1366px) {
    .section-grid {
        height: 120vh
    }
}

@media (max-width: 1024px) and (orientation: landscape) {
    .section-grid {
        height: 120vh
    }
}

@media (max-width: 1023px) and (orientation: portrait) {
    .section-grid {
        height: 120vh
    }
}

@media (max-width: 767px) and (orientation: portrait) {
    .section-grid {
        height: 140vh
    }
}

.section-grid .grid {
    position: relative;
    display: flex;
    width: 175%;
    transform: translate(-40%) rotate(-6deg);
    left: 50%;
    margin: 0
}

@media (max-width: 1366px) and (orientation: landscape) {
    .section-grid .grid {
        transform: translate(-35%) rotate(-6deg)
    }
}

@media (max-width: 1366px) and (orientation: portrait) {
    .section-grid .grid {
        width: 250%;
        transform: translate(-40%) rotate(-6deg)
    }
}

@media (max-width: 1023px) and (orientation: portrait) {
    .section-grid .grid {
        transform: translate(-35%) rotate(-6deg)
    }
}

@media (max-width: 1024px) and (orientation: landscape) {
    .section-grid .grid {
        transform: translate(-30%) rotate(-6deg)
    }
}

@media (max-width: 767px) and (orientation: portrait) {
    .section-grid .grid {
		width: 200%;
        transform: translate(-44%) rotate(-10deg)
    }
}



.section-grid .grid__column {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 20%
}

@media (max-width: 767px) {
    .section-grid .grid__column {
        flex: 1 0 20%;
        width: 33.3333333333%
    }
}

@media (max-width: 1366px) and (pointer: coarse) {
    .section-grid .grid__column[data-id="3"] {
        display: none
    }
}

@media (max-width: 1366px) and (pointer: coarse) {
    .section-grid .grid__column[data-id="0"] {
        transform: translateY(-1%)
    }
}

@media (max-width: 767px) and (pointer: coarse) {
    .section-grid .grid__column[data-id="0"] {
        transform: translateY(8%)
    }
}

@media (max-width: 1366px) and (pointer: coarse) {
    .section-grid .grid__column[data-id="1"] {
        transform: translateY(-14%)
    }
}

@media (max-width: 767px) and (pointer: coarse) {
    .section-grid .grid__column[data-id="1"] {
        transform: translateY(-5%)
    }
}

@media (max-width: 1366px) and (pointer: coarse) {
    .section-grid .grid__column[data-id="2"] {
        transform: translateY(-27%)
    }
}

@media (max-width: 1366px) and (orientation: portrait) and (pointer: coarse) {
    .section-grid .grid__column[data-id="2"] {
        transform: translateY(-19%)
    }
}

@media (max-width: 767px) and (pointer: coarse) {
    .section-grid .grid__column[data-id="2"] {
        transform: translateY(-18%)
    }
}

@media (max-width: 1366px) and (pointer: coarse) {
    .section-grid .grid__column[data-id="3"] {
        transform: translateY(5%)
    }
}

@media (max-width: 1366px) and (pointer: coarse) {
    .section-grid .grid__column[data-id="4"] {
        transform: translateY(-15%)
    }
}

@media (max-width: 767px) and (pointer: coarse) {
    .section-grid .grid__column[data-id="4"] {
        transform: translateY(2%)
    }
}

@media (max-width: 1366px) and (pointer: coarse) {
    .section-grid .grid__column[data-id="5"] {
        transform: translateY(-11%)
    }
}

@media (max-width: 767px) and (pointer: coarse) {
    .section-grid .grid__column[data-id="5"] {
        transform: translateY(-2%)
    }
}

@media (max-width: 767px) and (pointer: coarse) {
    .section-grid .grid__column[data-id="6"] {
        transform: translateY(2%)
    }
}

.section-grid .grid__items.is-clone {
    position: relative;
    width: 100%
}

.section-grid .grid__item {
    width: 100%;
    padding: 4.1666666667%;
    box-sizing: border-box
}

.section-grid .grid__size {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 59.384615%
}

.section-grid .grid--red {
    background-color: #d71e28
}

.section-grid .grid--blue {
    background-color: #003264
}

.section-grid .grid--white {
    background-color: #c8cdd2
}

.section-grid .grid__content {
    border-radius: 20px;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden
}

@media (max-width: 1024px) {
    .section-grid .grid__content {
        border-radius: 15px
    }
}

.section-grid .image-cover {
    min-width: 100%
}

.section-grid .image-noncover {
    max-width: 100%;
	border-radius:24px;
    max-height: 100%;
	opacity:.8!important;
	transition: .3s all ease-in-out;
}
.section-grid .image-noncover:hover {opacity:1!important
}


.section-grid .grid__bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
}

.section-grid .grid__video {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    transform: translate(-50%, -50%);
    -o-object-fit: cover;
    object-fit: cover
}

.section-grid .grid__swapimage {
    position: absolute
}