.mt-process-block {
    --iconSize: 40px;
    --imgSize: 16px;

    @media screen and (min-width: 768px) {
        --iconSize: 64px;
        --imgSize: 24px;
    }

    .mt-process-block__inner {
        display: grid;
        gap: 2rem;
        align-items: flex-start;
        position: relative;

        @media screen and (min-width: 1024px) {
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 3rem;
        }
    }

    .mt-process-block__media {
        width: 100%;

        img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
            margin: 0;
        }

        video {
            width: 100%;
            height: auto;
            margin: 0;
        }
    }

    .mt-process-block__steps {
        align-self: center;
        display: grid;
        gap: 2rem;

        .mt-process-block--media-right & {
            order: -1;
        }
    }

    .mt-process-block__step {
        display: flex;
        gap: 1rem;
        position: relative;

        &:not(:last-child) {
            padding-bottom: 1rem;
        }
    }

    .mt-process-block__step-title {
        font-size: 18px;

        @media screen and (min-width: 768px) {
            font-size: 24px;
        }
    }

    .mt-process-block__step-line {
        position: absolute;
        left: 20px;
        transform: translateX(-50%);
        top: 0;
        width: 1px;
        height: 0;
        border: 1px dashed black;

        @media screen and (min-width: 768px) {
            left: 32px;
        }

        .text-white & {
            border-color: white;
        }
    }

    .mt-process-block__step-icon {
        width: var(--iconSize);
        height: var(--iconSize);
        flex-shrink: 0;
        display: flex;
        justify-content: center;

        img {
            object-fit: contain;
            margin: 0;
            height: 0;
            width: auto;
        }
    }

    .mt-process-block__step-icon-inner {
        background-color: black;
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        overflow: hidden;
        position: relative;
        z-index: 1;
        color: white;
        width: 0;
        height: 0;

        .text-white & {
            background-color: white;
            color: black;
        }
    }

    .mt-process-block__step-text {
        margin: 0;
    }

    &.mt-process-block--animate {
        .mt-process-block__step-icon-inner {
            animation: scaleIcon .5s ease-in-out forwards;

            img {
                animation: scaleImg .5s ease-in-out forwards;
            }
        }

        .mt-process-block__step-line {
            animation: scaleLine .5s ease-in-out forwards;
        }
    }
}

@keyframes scaleIcon {
    from {
        width: 0;
        height: 0;
    }
    to {
        width: var(--iconSize);
        height: var(--iconSize);
    }
}

@keyframes scaleImg {
    from {
        height: 0;
    }
    to {
        height: var(--imgSize);
    }
}

@keyframes scaleLine {
    from {
        height: 0;
    }
    to {
        height: 100%;
    }
}