@media screen and (min-width: 768px) {
    .picto-img.list {
        padding-bottom: unset
    }
}

.picto-img.list .picto-img--step {
    display: grid;
    grid-template-columns: 1fr 1fr
}

.picto-img.list .picto-img--step .step-item {
    flex-direction: column;
    gap: 16px;
}

@media screen and (min-width: 1200px) {
    .picto-img.list .picto-img--step .step-item {
        align-items: flex-start
    }
}


.picto-img.list .picto-img--step .btn {
    grid-column: 1/ -1;
    justify-self: center;
    margin-top: 8px
}

.picto-img--container {
    display: flex;
    flex-direction: column;
    gap: 80px
}

@media screen and (min-width: 768px) {
    .picto-img--container {
        flex-direction: row;
        gap: 16px;
        align-items: center;
        justify-content: space-between
    }
}

@media screen and (min-width: 992px) {
    .picto-img--container {
        gap: 60px
    }
}

.picto-img--content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
    padding-inline: 16px
}

@media screen and (min-width: 768px) {
    .picto-img--content {
        flex: 1 1 auto;
        padding-inline: 0;
        padding-left: 112px
    }
}

@media screen and (min-width: 900px) {
    .picto-img--content {
        flex: 1 1 auto;
        max-width: 776px;
        width: 100%
    }
}

.picto-img--content h2 {
    display: flex;
    flex-direction: column;
    position: relative;
    color: var(--accent-1);
    font-size: 2.375rem;
    line-height: 80%;
    width: 100%;
    margin-bottom: 16px;
    max-width: 320px
}

@media screen and (min-width: 1024px) {
    .picto-img--content h2 {
        font-size: 4.25rem;
        max-width: unset
    }
}

.picto-img--content h2::after {
    content: "";
    position: absolute;
    -webkit-mask: url(../images/Heart.svg) no-repeat center;
    mask: url(../images/Heart.svg) no-repeat center;
    -webkit-mask-size: contain;
    mask-size: contain;
    background-color: var(--accent-1);
    opacity: 0.2;
    height: 44px;
    width: 44px;
    top: -12px;
    right: -9px;
    z-index: -1;
    transform: scaleX(-1)
}

.bg-variant .picto-img--content h2::after {
background-color: var(--rose-dark);
}

@media screen and (min-width: 900px) {
    .picto-img--content h2::after {
        top: -50px;
        height: 98px;
        width: 98px;
        transform: scaleX(-1)
    }
}

.picto-img--content h2 span {
    color: var(--white);
    -webkit-mask: url(../images/mask.svg) no-repeat center;
    mask: url(../images/mask.svg) no-repeat center;
    -webkit-mask-size: cover;
    mask-size: cover;
    -webkit-mask-position: bottom;
    mask-position: bottom;
    background-color: var(--accent-1);
    padding: 10px;
    width: -webkit-max-content;
    width: -moz-max-content;
    width: max-content;
    position: relative;
    align-self: flex-end
}

.picto-img--step {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%
}

@media screen and (min-width: 900px) {
    .picto-img--step {
        gap: 32px
    }
}

.picto-img--step .step-item {
    display: flex;
    align-items: flex-start;
    gap: 16px
}

.picto-img--step .step-item::before {
    content: "";
    display: block;
    -webkit-mask: var(--mask-step);
    mask: var(--mask-step);
    -webkit-mask-size: contain;
    mask-size: contain;
    background-color: #F8CAC9;
    height: 32px;
    width: 32px;
    flex-shrink: 0
}

.bg-variant .picto-img--step .step-item::before {
     background-color: var(--rose-dark);
}

@media screen and (min-width: 768px) {
    .picto-img--step .step-item::before {
        height: 48px;
        width: 48px
    }
}

.picto-img--step .step-item .uptitle {
    font-size: 0.625rem;
    letter-spacing: 2px
}

@media screen and (min-width: 900px) {
    .picto-img--step .step-item .uptitle {
        font-size: 0.75rem
    }
}

.picto-img--step .step-item h3 {
    color: var(--accent-1);
    font-size: 1.125rem;
    font-style: normal;
    font-weight: 900;
    line-height: 120%
}

@media screen and (min-width: 900px) {
    .picto-img--step .step-item h3 {
        font-size: 1.75rem
    }
}

.picto-img--step .step-item p {
    margin-top: 16px;
    font-size: 1rem;
    font-style: normal;
    font-weight: 400;
    line-height: 180%
}