.text-img--container {
    padding-inline: 16px;
    display: flex;
    flex-direction: column-reverse;
    gap: 24px
}

@media screen and (min-width: 992px) {
    .text-img--container {
        padding-inline: 80px;
        flex-direction: row;
        align-items: center
    }
}

.text-img--buttons {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    margin-top: 24px
}

@media screen and (min-width: 992px) {
    .text-img--buttons {
        flex-direction: row;
        gap: 24px;
        margin-top: 48px
    }
}

.text-img--content {
    width: 100%;
    flex-shrink: 0;
    text-align: center
}

@media screen and (min-width: 992px) {
    .text-img--content {
        text-align: left;
        max-width: 632px
    }
}

.text-img--list {
    display: flex;
    flex-direction: column;
    gap: 24px
}

@media screen and (min-width: 992px) {
    .text-img--list {
        gap: 36px
    }
}

.text-img:has(.text-img--list) .text-img--buttons {
    opacity: 0;
    transform: translateY(20px)
}

.text-img .item {
    display: flex;
    flex-direction: column;
    gap: 12px;
    text-align: left;
    opacity: 0;
    transform: translateY(20px)
}

@media screen and (min-width: 992px) {
    .text-img .item {
        flex-direction: row;
        gap: 24px
    }
}

.text-img .item span {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    height: 64px;
    width: 64px;
    background: var(--pomme);
    border-radius: 50%
}

@media screen and (min-width: 992px) {
    .text-img .item span {
        height: 84px;
        width: 84px
    }
}

.text-img .item span::before {
    content: '';
    width: 36px;
    height: 36px;
    background: var(--vert);
    -webkit-mask: var(--picto);
    mask: var(--picto);
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center
}

@media screen and (min-width: 992px) {
    .text-img .item span::before {
        width: 48px;
        height: 48px
    }
}

.text-img .item h3 {
    margin-bottom: 8px
}

.text-img .item p {
    color: var(--vert-anglais)
}

.text-img .uptitle,
.text-img h2 {
    color: var(--orange)
}

.text-img h2 {
    margin-bottom: 24px
}

.text-img .uptitle {
    margin-bottom: 24px
}

.text-img :has(.uptitle) h2 {
    color: var(--vert-anglais)
}

@media screen and (min-width: 992px) {
    .text-img :has(.uptitle) h2 {
        margin-bottom: 48px
    }
}

.text-img--media img {
    width: 100%;
    height: 250px;
    -o-object-fit: contain;
    object-fit: contain
}

@media screen and (min-width: 992px) {
    .text-img--media img {
        height: 480px
    }
}

@media screen and (min-width: 992px) {
    .text-img.reverse .text-img--container {
        flex-direction: row-reverse
    }
}

.text-img.has-background {
    background: var(--vert)
}

.text-img.has-background p,
.text-img.has-background h2,
.text-img.has-background h3 {
    color: white
}

.text-img.has-background .uptitle {
    color: var(--pomme)
}

.text-img.has-background .text-img--container {
    padding-top: 24px;
    padding-bottom: 24px
}

@media screen and (min-width: 992px) {
    .text-img.has-background .text-img--container {
        padding-top: 80px;
        padding-bottom: 80px
    }
}

@media screen and (min-width: 992px) {
    .text-img.clipped-1 .text-img--container {
        gap: 92px;
        padding-inline: 0;
        padding-right: 80px
    }
}

.text-img.clipped-1 .text-img--media img {
    -webkit-mask: url("../images/pattern-1-mobile.svg") no-repeat center;
    mask: url("../images/pattern-1-mobile.svg") no-repeat center;
    -webkit-mask-size: contain;
    mask-size: contain;
    height: 260px;
    -o-object-fit: cover;
    object-fit: cover
}

@media screen and (min-width: 992px) {
    .text-img.clipped-1 .text-img--media img {
        -webkit-mask: url("../images/pattern-1-desk-left.svg") no-repeat left;
        mask: url("../images/pattern-1-desk-left.svg") no-repeat left;
        -webkit-mask-size: contain;
        mask-size: contain;
        height: 560px
    }
}

@media screen and (min-width: 1441px) {
    .text-img.clipped-1 .text-img--media img {
        -webkit-mask: url("../images/pattern-1-mobile.svg") no-repeat center;
        mask: url("../images/pattern-1-mobile.svg") no-repeat center;
        -webkit-mask-size: contain;
        mask-size: contain
    }
}

@media screen and (min-width: 992px) {
    .text-img.clipped-1.reverse .text-img--container {
        padding-inline: 0;
        padding-left: 80px
    }
}

@media screen and (min-width: 992px) {
    .text-img.clipped-1.reverse .text-img--media img {
        -webkit-mask: url("../images/pattern-1-desk-right.svg") no-repeat right;
        mask: url("../images/pattern-1-desk-right.svg") no-repeat right;
        -webkit-mask-size: contain;
        mask-size: contain;
        height: 560px
    }
}

@media screen and (min-width: 1441px) {
    .text-img.clipped-1.reverse .text-img--media img {
        -webkit-mask: url("../images/pattern-1-mobile.svg") no-repeat center;
        mask: url("../images/pattern-1-mobile.svg") no-repeat center;
        -webkit-mask-size: contain;
        mask-size: contain
    }
}

@media screen and (min-width: 992px) {
    .text-img.clipped-2 .text-img--container {
        gap: 92px;
        padding-inline: 0;
        padding-right: 80px
    }
}

.text-img.clipped-2 .text-img--media img {
    -webkit-mask: url("../images/pattern-2-mobile.svg") no-repeat center;
    mask: url("../images/pattern-2-mobile.svg") no-repeat center;
    -webkit-mask-size: contain;
    mask-size: contain;
    height: 260px;
    -o-object-fit: cover;
    object-fit: cover
}

@media screen and (min-width: 992px) {
    .text-img.clipped-2 .text-img--media img {
        -webkit-mask: url("../images/pattern-2-desk-left.svg") no-repeat left;
        mask: url("../images/pattern-2-desk-left.svg") no-repeat left;
        -webkit-mask-size: contain;
        mask-size: contain;
        height: 696px
    }
}

@media screen and (min-width: 1441px) {
    .text-img.clipped-2 .text-img--media img {
        -webkit-mask: url("../images/pattern-2-mobile.svg") no-repeat center;
        mask: url("../images/pattern-2-mobile.svg") no-repeat center;
        -webkit-mask-size: contain;
        mask-size: contain
    }
}

@media screen and (min-width: 992px) {
    .text-img.clipped-2.reverse .text-img--container {
        padding-inline: 0;
        padding-left: 80px
    }
}

@media screen and (min-width: 992px) {
    .text-img.clipped-2.reverse .text-img--media img {
        -webkit-mask: url("../images/pattern-2-desk-right.svg") no-repeat right;
        mask: url("../images/pattern-2-desk-right.svg") no-repeat right;
        -webkit-mask-size: contain;
        mask-size: contain;
        height: 696px
    }
}

@media screen and (min-width: 1441px) {
    .text-img.clipped-2.reverse .text-img--media img {
        -webkit-mask: url("../images/pattern-2-mobile.svg") no-repeat center;
        mask: url("../images/pattern-2-mobile.svg") no-repeat center;
        -webkit-mask-size: contain;
        mask-size: contain
    }
}